微信小程序之获取input框输入值
第一种:bindsubmit方法
注意*:
1.使用form里面定义bindsubmit
事件
2.bindsubmit
事件需要配合button里面定义的formType="submit"
操作
3.设置input的name
值来获取对应的数据
- wxml代码如下:
<form bindsubmit="formSubmit">
<input type="text" name="name" class="content" placeholder="请输入司机姓名" />
<input type="text" name="plateNo" class="content" placeholder="请输入车牌号" />
<button class="wehx-foot-btn" hover-class="wehx-button_hover" formType="submit">确定</button>
</form>
- js代码如下:
通过e.detail.value
获取数据, 其中包含input的value值
formSubmit: function (e) {
console.log(e.detail.value)
let name= data.detail.value.name
let plateNo= data.detail.value.plateNo;
}
第二种:bindinput方法
注意*:
1.在input框内使用bindinput
属性的方式定义事件名称
2.事件是光标移动发生数据改变,数据自动获取
- wxml代码如下:
<input type="text" bindinput='getInputName' name="name" class="content" placeholder="请输入司机姓名" />
- js代码如下:
通过e.detail
获取数据, 其中包含input的value值、光标的位置cursor
getInputName:function(e){
console.log(e.detail)
// 获取到input的值
let name = e.detail.value;
// 获取到光标的位置
let local = e.detail.cursor;
}