微信小程序获取input输入框的值
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
表示长度