微信小程序文本输入＜input/＞详解

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等

1 基本使用

<input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

基本效果就是显示了一个文本输入框。

placeholder 输入框为空时的占位符
auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签或者 textarea 来设置这个属性

2 获取输入框中的内容

bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容。

当然在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

  <input bindinput="userNameInputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

对应的 js

  /*** 输入框实时回调* @param {*} options */userNameInputAction: function (options) {//获取输入框输入的内容let value = options.detail.value;console.log("输入框输入的内容是 " + value)},

效果

3 输入框焦点监听

应用场景还是比较多的，比如输入结束时去校验个数据什么的

bindfocus
bindblur 输入框焦点移出
bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件

  <input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />

对应的 js

  userNameFocusAction: function (options) {//输入框焦点获取let value = options.detail.value;console.log("输入框焦点获取 " + value)},userNameBlurAction: function (options) {//输入框焦点移出let value = options.detail.value;console.log("输入框焦点移出 " + value)},userNameConfirm: function (options) {//点击了键盘上的完成按钮let value = options.detail.value;console.log("点击了键盘上的完成按钮 " + value)},

效果图

4 常用输入限制

disabled 默认为false 不禁用输入框，为true时是不可输入的

<input disabled="{{isInput}}" placeholder="请输入用户名" />

Page({/*** 页面的初始数据*/data: {isInput:true},})

password 默认为 false ，为true时，输入的内容为密码类型

<input  password="true" placeholder="请输入用户名" />

value 输入框初始内容

5 type 文本框输入内容格式

在HTML中，input组件中的type属性可以接收哪些值，有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中，type属性只有text、number、idcard、digit、time和date。

type 输入框可输入的数据类型


text	文本
number	数字纯数字键盘模式输入无小数点
idcard	数字数字键盘（无小数点、有个 X 键）
digit	数字带小数点的数字键盘模式输入

完毕

微信小程序文本输入＜input/＞详解相关推荐

php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录组件_基础视图容器 view 文本 text 图片 image 组件_滑块视图容器基本实现 Swiper常用属性说明组件_滚动视图区域水平滚动垂直滚动常用属性组件_icon 图标使 ...
微信小程序文本输入＜textarea/＞详解
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现 1 基本使用 <textarea ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录小程序与普通网页开发的区别体验小程序微信小程序账号申请微信小程序开发者工具下载安装创建项目开发者工具说明小程序目录结构描述整体的 app 描述各自页面的 page 全局配置_Pa ...
Charles微信小程序抓包（详解）
一.Charles官网下载安装包 https://www.charlesproxy.com/download/latest-release/ 官网下载不了的可去百度网盘获取链接:https://pa ...
微信小程序按钮Button使用详解
最近在出微信小程序系列教程顺手写了点博客欢迎大家关注 button 用来实现按钮点击效果,本文章效果如下: 1 wxml 文件中在这里我就放了三个普通的按钮 <view class=&qu ...

微信小程序文本输入＜input/＞详解

1 基本使用

2 获取输入框中的内容

3 输入框焦点监听

4 常用输入限制

5 type 文本框输入内容格式

微信小程序文本输入＜input/＞详解相关推荐

最新文章

热门文章

微信小程序文本输入＜input/＞ 详解

1 基本使用

2 获取输入框中的内容

3 输入框焦点监听

4 常用输入限制

5 type 文本框输入内容格式

微信小程序文本输入＜input/＞ 详解相关推荐

最新文章

热门文章

微信小程序文本输入＜input/＞详解

微信小程序文本输入＜input/＞详解相关推荐