由于注册账号限制不能输入中文,所以在输入时候需要把中文给过滤掉,用正则就可以实现
str.replace(/[\u0391-\uFFE5]/gi, '');
oninput 事件
一般在 pc 端实现方法是需要监听 input 事件就可以做相应的处理
<input type="text" id="input1"><script> document.getElementById("input1").oninput = function(e) { e.target.value = e.target.value.replace(/[\u0391-\uFFE5]/gi, '') }</script>
这种在部分移动端会出现问题,例如 ios 发现在中文输入法输入的时候,输入法的中文还没选择的时候就已经触发了 oninput 事件,这显然不合理,应该是在选择要输入的单词时候再触发才合理
compositionend 事件
compositionend 事件的定义如下:
文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。
所以在 ios 上应该通过监听 compositionend 事件来处理输入后的值,所以可以这样做
document .getElementById('input1') .addEventListener('compositionend', function (e) { e.target.value = e.target.value.replace(/[\u0391-\uFFE5]/gi, ''); });
兼容性写法
<script> var node = document.querySelector('#input1'); var lock = false; node.addEventListener('compositionstart', function(){ lock = true; }) node.addEventListener('compositionend', function(){ lock = false; }) node.addEventListener('input', function(e){ if(!lock) e.target.value = e.target.value.replace(/[\u0391-\uFFE5]/gi, ''); });</script>