阅读(1881)
赞(11)
input
2020-02-11 17:53:17 更新
基础库 1.0.0 开始支持本组件。
输入框组件，用于键盘交互。
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| value | string | 否 | 输入框的初始值 | 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 | 否 | 获取焦点，详情见下方 Tip | 1.0.0 |
| cursor-spacing | number | 0 | 否 | 指定软键盘弹出时，与光标的距离是多少，单位是 px | 1.0.0 |
| cursor | number | -1 | 否 | 指定 focus 时的光标位置，详情见下方 Tip | 1.0.0 |
| selection-start | number | -1 | 否 | 指定 focus 时选中片段的起始位置，详情见下方 Tip | 1.0.0 |
| selection-end | number | -1 | 否 | 指定 focus 时选中片段的结束位置，详情见下方 Tip | 1.0.0 |
| bindinput | EventHandler | 否 | 键盘输入时触发，详见下方说明 | 1.0.0 | |
| bindfocus | EventHandler | 否 | 输入框聚焦时触发，详见下方说明 | 1.0.0 | |
| bindblur | EventHandler | 否 | 输入框失去焦点时触发，详见下方说明 | 1.0.0 | |
| bindconfirm | EventHandler | 否 | 用户点击键盘的完成按钮时触发，详见下方说明 | 1.0.0 |
type 的有效值
| 值 | 说明 | 最低支持版本 |
|---|---|---|
| text | 文本输入键盘 | 1.0.0 |
| number | 数字输入键盘 | 1.0.0 |
| digit | 带小数点的数字键盘 | 1.0.0 |
bindinput 说明
键盘输入时触发, 若返回 string 则替换 input 内文本内容。
event.detail.value 为输入框内容
event.detail.cursor 为光标位置
bindfocus 说明
输入框失去焦点时触发
event.detail.value 为输入框内容
event.detail.height 为键盘高度
bindblur 说明
输入框失去焦点时触发
event.detail.value 为输入框内容
bindconfirm 说明
用户点击键盘的完成按钮时触发
event.detail.value 为输入框内容
效果图
代码示例
<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" });
}
});Bug & Tip
- Tip：避免过于频繁地在 bindinput 回调里执行 setData({ value: ... })，如果想在键盘输入时改变 input 框的值，可以直接在 bindinput 回调里 return 一个字符串。重新设置 focus cursor selection-start selection-end 可以触发对应效果。 但由用户行为导致的失去焦点，选择文字 行为不会同步更新 data。因此使用 this.setData 更新关联 data 可以理解为派发了一个事件，但是不能根据 data 判断组件当前状态。
← form