一 bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
1 通过 bindinput,可以为文本框绑定输入事件
<input value="{{msg}}" bindinput="inputHandler"></input>
2 在页面的 .js 文件中定义事件处理函数
inputHandler(e) {
// e.detail.value 是变化后,文本框最新的值
console.log(e.detail.value)
this.setData({
msg: e.detail.value
})
}
二 实现文本框和 data 之间的数据同步
1 定义数据
2 渲染结构
3 美化样式
4 绑定 input 事件处理函数
三 定义数据
Page({
data: {
msg: '你好'
}
})
四 渲染结构
<input value="{{msg}}" bindinput="inputHandler"></input>
五 美化样式
input {
border: 1px solid #eee;
margin: 5px;
padding: 5px;
border-radius: 3px;
}
六 绑定 input 事件处理函数
// input 输入框的事件处理函数
inputHandler(e) {
// console.log(e.detail.value)
this.setData({
msg: e.detail.value
})
}