测试的时候发现,有用户习惯用输入法输入,不按回车键,按切换大小写输入进输入框,而vue的双向绑定无法监听这种方式的输入
最终达到效果:
(1)校验只允许用户输入数字、字母
(2)非常规操作用户(输入法输入并用shift输进input框的方式)也能监听
解决方案:
使用input绑定事件,代替οninput=' value=value.replace(/[^a-zA-Z0-9]/g, '')'
<el-input v-model="orderNo" placeholder="请输入订单号" input=" handleInputOrder"/>
methods: {
//获取订单号的校验(只允许输入数字、字母)
handleInputOrder(value) {
this.orderNo = value.replace(/[^a-zA-Z0-9]/g, '');
}
}
原来的写法(无法无监听):
<el-input v-model="orderNo" placeholder="请输入订单号" oninput="value=value.replace(/[^a-zA-Z0-9]/g,'')" />