一、基础输入框
1、基础输入框是最基本的input组件，支持用户输入任意字符串。
2、在wxml中使用<input/>标签即可创建一个基础输入框。
3、示例代码：
<input placeholder="请输入"/>
二、数字输入框
1、数字输入框只能输入数字，不支持其他字符。
2、在wxml中，设置type属性为number即可创建数字输入框。
3、示例代码：
<input type="number" placeholder="请输入数字"/>
三、密码输入框
1、密码输入框会自动将输入内容替换为固定符号，保护用户输入的隐私。
2、在wxml中，设置type属性为password即可创建密码输入框。
3、示例代码：
<input type="password" placeholder="请输入密码"/>
四、带清空按钮的输入框
1、带清空按钮的输入框在右侧有一个可以一键清空输入内容的按钮。
2、在wxml中，设置type属性为text，同时设置bindinput、bindblur事件，通过调用代码清空输入框内容。
3、示例代码：
<input type="text" placeholder="请输入" bindinput="bindInputChange" bindblur="bindInputBlur"/>
Page({
data: {
inputValue: ''
},
bindInputChange: function (e) {
this.setData({
inputValue: e.detail.value
})
},
bindInputBlur: function () {
this.setData({
inputValue: ''
})
}
})
五、带搜索按钮的输入框
1、带搜索按钮的输入框在右侧有一个可以点击搜索输入内容的按钮。
2、在wxml中，设置type属性为text，同时设置bindinput、bindconfirm、bindfocus事件，bindinput事件用于监听输入内容，bindconfirm事件用于监听用户点击搜索按钮，bindfocus事件用于监听输入框获得焦点。
3、示例代码：
<input type="text" placeholder="请输入" bindinput="searchInputChange" bindconfirm="searchConfirm" bindfocus="searchFocus"/>
Page({
data: {
inputVal: ''
},
searchInputChange: function (e) {
this.setData({
inputVal: e.detail.value
})
},
searchConfirm: function () {
console.log('搜索:' + this.data.inputVal)
},
searchFocus: function () {
console.log('输入框获得焦点')
}
})
六、自定义键盘的输入框
1、自定义键盘的输入框可以修改键盘类型，自定义键盘按钮，实现更多自定义功能。
2、在wxml中，设置type属性为text，同时设置focus属性为true，弹出自定义键盘。
3、示例代码：
<input type="text" placeholder="请输入" focus="{{focus}}" bindfocus="showCustomKeyboard"/>
Page({
data: {
focus: false,
customKeyboardData: {
confirmBtn: {
text: '确定',
color: '#333',
background: '#ccc'
},
keyValueArray: [
'1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.', '删除'
]
}
},
showCustomKeyboard: function () {
this.setData({
focus: true
})
}
})
原创文章，作者：KLUL，如若转载，请注明出处：https://www.506064.com/n/138184.html
微信扫一扫 
支付宝扫一扫 