移动端input限制输入中文

2017-08-10

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

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>

 

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript html5

评论

Loading...

最新评论

相关推荐

前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
ES6装饰器的应用
什么是装饰器 装饰器(Decorator)函数,是用来修改类的行为,一个装饰器函数有三个参数 target 装饰...
scroll-top-icon