我们在input框中输入内容的时候,可能会有输入空格的情况,但是在我们的开发过程中,一般都不能有空格的,所以我们要在用户输入的过程中,将空格过滤掉,并且适应所有input的name参数的方法。代码如下:
一、wxml代码
<view>
<input type="text" data-name="account" value="{{account}}" bindinput="account"/>
</view>
二、wxss代码
view {
width: 100vw;
height: 100rpx;
display: flex;
justify-content: center;
}
view input {
width: 80vw;
height: 80rpx;
border: 1rpx solid black;
border-radius: 8rpx;
}
三、js代码
Page({
account(e){
console.log(e);
let name = e.currentTarget.dataset.name
this.setData({
[name]: e.detail.value.replace(/\s+/g, '') // 或者用trim(可以过滤掉两边的空格)
})
},
})
四、实现此功能的思路
1、给input框绑定bindinput输入事件
2、使用双向绑定同步获取当前输入框的value值
3、使用data-name方法获取input的name
4、在js中使用正则表达式将输入框中的空格过滤掉