移动端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>

 

标签: javascript html5

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论