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

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

作者： 轻酌~浅醉 参考：ralStyle贵 官方文档

1，form表单获取

wxml代码

<view class='box'>
  <form bindsubmit='searchBox'>
      <input type='text' class='userBox' name='username'></input>
      <input type='text' class='pwdBox' name='pwd'></input>
      <button class='login' form-type='submit'>登录</button>
  </form>
  <text>输入的内容:{{first}}</text>
  <text>输入的内容2:{{second}}</text>
</view>

js

searchBox:function(e){
    const that = this;
    let first,second;
    that.setData({
      first    :    e.detail.value.username,
      second   :     e.detail.value.pwd
    })
  }
  //这个函数一定要写在标签上才能用e.detail.value获取到

2，bindinput事件获取

wxml代码

//防止误导，故去掉无关属性
<input bindinput="getPhone"/>

js代码

getPhone(e){
	console.log(e);
}

官方对bindinput事件的说明：键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
打印的数据

• currentTarget:{id: “”, dataset: {…}, offsetTop: 588, offsetLeft: 0}
• detail:{value: "15600519819", cursor: 11}
• target:{id: “”, dataset: {…}, offsetTop: 588, offsetLeft: 0}
• timeStamp:1543306108218
• touches:[]
• type:“input”
• proto:Object

我们需要的主要是detail对象里的数据，其中value表示input数据，cursor表示长度