由于注册账号限制不能输入中文,所以在输入时候需要把中文给过滤掉,用正则就可以实现

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>