移动端input限制输入中文

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

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>