输入框。
属性名 | 类型 | 默认值 | 说明 |
value | String | 输入框的初始内容 | |
type | String | text | input 的类型,有效值:text, number, idcard, digit, time, date |
password | Boolean | false | 是否是密码类型 |
placeholder | String | 输入框为空时占位符 | |
placeholder-style | String | 指定 placeholder 的样式 | |
placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 最大输入长度,设置为 -1 的时候不限制最大长度 |
auto-focus | Boolean | false | 自动聚焦,拉起键盘。页面中只能有一个 <input/> 或 <textarea/> 设置 auto-focus 属性 |
focus | Boolean | false | 获取焦点(开发工具暂不支持) |
bindinput | EventHandle | 除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail = {value: value},处理函数可以直接 return 一个字符串,将替换输入框的内容。 | |
bindfocus | EventHandle | 输入框聚焦时触发,event.detail = {value: value} | |
bindblur | EventHandle | 输入框失去焦点时触发,event.detail = {value: value} |
<view class=”page”>
<view class=”page__hd”>
<text class=”page__title”>input</text>
<text class=”page__desc”>输入框</text>
</view>
<view class=”page__bd”>
<view class=”section”>
<input placeholder=”这是一个可以自动聚焦的input” auto-focus />
</view>
<view class=”section”>
<input placeholder=”此处只有在点击下方按钮时才聚焦” focus=”{{focus}}” />
<view class=”btn-area”>
<button bindtap=”bindButtonTap”>使得输入框获取焦点</button>
</view>
</view>
<view class=”section”>
<input maxlength=”10″ placeholder=”最大输入长度10″ />
</view>
<view class=”section”>
<view class=”section__title”>你输入的是:{{inputValue}}</view>
<input bindinput=”bindkeyinput” placeholder=”输入同步到view中”></input>
</view>
<view class=”section”>
<input placeholder=”连续输入两个1会变成2″ bindinput=”bindReplaceInput”></input>
</view>
<view class=”section”>
<input placeholder=”输入123自动收起键盘” bindinput=”bindHideKeyboard”></input>
</view>
<view class=”section”>
<input type=”number” placeholder=”这是一个数字输入框” />
</view>
<view class=”section”>
<input password type=”text” placeholder=”这是一个密码输入框” />
</view>
<view class=”section”>
<input type=”digit” placeholder=”带小数点的数字键盘”/>
</view>
<view class=”section”>
<input type=”idcard” placeholder=”身份证输入键盘” />
</view>
<view class=”section”>
<input placeholder-style=”color:red” placeholder=”占位符字体是红色的” />
</view>
</view>
</view>
Page({
data:{
focus:false,
inputValue:”
},
bindButtonTap : function (e) {
this.setData({
focus: true
})
},
bindkeyinput : function (e) {
this.setData({
inputValue:e.detail.value
})
},
bindReplaceInput: function (e) {
var value = e.detail.value
var pos = e.detail.cursor
if(pos != -1) {
//光标在中间
var left = e.detail.value.slice(0,pos)
//计算光标的位置
pos = left.replace(/11/g,’2′).length
}
return {
value : value.replace(/11/g,’2′),
cursor: pos
}
},
bindHideKeyboard : function (e) {
if(e.detail.value === “123”) {
wx.hideKeyboard() //收起键盘
}
}
})