web和微信小程序input输入时禁止输入中文方法

前言：作为一个小白～～，每天进步一点点，每天总结一点点，生活就会美好一点～

 

--------------------------------

 

进入正文

1.首先禁止输入中文就需要用到正则表达式；

2.其次在input输入框操作，就需要了解input输入框的事件；

3.再看微信小程序中，那么就要知道和web是有区别的；

 

按照上面的3个知识，我们依次来解释～

1.禁止输入中文的正则表达式为：reg = /[\u4e00-\u9fa5]/ig;

2.在键盘输入的时候判断输入的是否是中文，则需要用到：onkeyup事件。那么，有个问题就是小程序中input没有是没有这个事件的，通过查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html知道可以用：bindinput事件代替。

3.整合前两个web中input输入时禁止中文可以用：

<input text= "tel" οnkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"  />

而小程序代码为：

<input class="item-input" placeholder-class="item-placeholder"  value="{{value}}" placeholder="请输入" bindinput="handleInput"/>

js代码为：

handleInput(e) {

let value = (e.detail.value || '').trim()

if (value) {

const reg = /[\u4e00-\u9fa5]/ig

if ((reg.test(value))) {

value = value.replace(reg, '')

wx.showToast('不允许输入中文')

}

}

this.setData({ value })

}

综上，今天的问题解决～