免费 AI IDE
字节跳动小程序开发组件文档 input
2019-08-09 14:15 更新
输入框。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | String | 输入框的初始值，也可以通过setData修改 | 1.0.0 | |
| type | String | text | input的类型，详情见后面的说明 | 1.0.0 |
| password | Boolean | false | 是否为密码输入 | 1.0.0 |
| placeholder | String | 占位字符 | 1.0.0 | |
| placeholder-style | String | 占位符的样式 | 1.0.0 | |
| disabled | Boolean | false | 是否禁用 | 1.0.0 |
| maxlength | Number | 140 | 最大输入长度 | 1.0.0 |
| focus | Boolean | false | 获取焦点 | 1.0.0 |
| cursor-spacing | Number | 0 | 指定软键盘弹出时，与光标的距离是多少，单位是px | 1.0.0 |
| cursor | Number | -1 | 指定focus时的光标位置 | 1.0.0 |
| selection-start | Number | -1 | 指定focus时选中片段的起始位置 | 1.0.0 |
| selection-end | Number | -1 | 指定focus时选中片段的结束位置 | 1.0.0 |
| bindinput | EventHandler | 键盘输入时触发，e.detail={value, cursor}；处理函数可以直接return一个字符串，将替换input框的内容。 |
1.0.0 | |
| bindfocus | EventHandler | 输入框聚焦时触发，event.detail={value,height}，height为软键盘高度 | 1.0.0 | |
| bindblur | EventHandler | 输入框失去焦点时触发，event.detail={value} | 1.0.0 | |
| bindconfirm | EventHandler | 用户点击键盘的完成按钮时触发，event.detail={value} | 1.0.0 |
type的取值范围：
| 值 | 说明 |
|---|---|
| text | 文本输入键盘 |
| number | 数字输入键盘 |
| digit | 带小数点的数字键盘 |
WARNING
避免过于频繁地在bindinput回调里执行setData({value: ...})，如果想在键盘输入时改变input框的值，可以直接在bindinput回调里return一个字符串
示例
<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
<input class="page-input"
placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
</view>
</view>
<view class="btn-area">
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
<input class="page-input"
placeholder="focus详情"
bindfocus="onfocus" bindconfirm="onconfirm" />
</view>
</view>
<view class="btn-area">{{focusDetail}}</view>
<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
<input class="page-input" placeholder="blur测试" bindblur="onblur" />
</view>
</view>
Page({
data: {
focus: false,
},
bindButtonTap: function (e) {
this.setData({
focus: true,
})
},
onfocus: function (e) {
console.log(e)
this.setData({focusDetail: JSON.stringify(e.detail)})
},
onblur: function (e) {
tt.showToast({title: 'blur'})
},
onconfirm: function (e) {
tt.showToast({title: 'confirm'})
}
})
以上内容是否对您有帮助：
更多建议：