⼩程序⽂本输⼊＜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⽂本input标签placeholder属性
number数字 纯数字键盘模式输⼊ ⽆⼩数点
idcard数字 数字键盘（⽆⼩数点、有个 X 键）
digit数字 带⼩数点的数字键盘模式输⼊
完毕

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。