微信小程序 input 事件

一 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
    })
  }