微信小程序input框输入值获取

提交表单时获取输入框的值

wxml

代码语言：javascript复制

<view>
  <!-- 携带 form 中的数据触发 submit 事件 -->
  <form bindsubmit="submit">
    <input value="{{ age }}" name="age"></input>
    <!-- 
      form-type用于form组件 点击会触发form的submit或reset事件
      合法值：submit 提交表单 reset重置表单
     -->
    <button form-type="submit"></button>
  </form>
</view>

js

代码语言：javascript复制

Page({
  data: {
    age: ''
  },
  //表单提交时触发
  submit(e) {
    console.log(e.detail.value);
    //e.detail.value获取到的是一个对象 通过每个输入框设置的name属性获取值
    //例如e.detail.value.age
  }
})

实时更新输入框的值

效果图

wxml

代码语言：javascript复制

<view>{{value}}</view>
<!-- bindinput：键盘输入时触发 -->
<input bindinput="oninput"></input>

js

代码语言：javascript复制

Page({
  data: {
      value: '默认值'  
  },
  //键盘输入时触发事件
  oninput(e) {
      this.setData({
        value: e.detail.value
      })
  }
})

表单

0 人点赞