input用keyup/keydown等监听汉字时的麻烦事

input用keyup/keydown等监听的时候,若是输入中文字符,汉字未输入完成还是拼音的时候,利用$(this).val()获取到的值全是拼音,这个做模糊查询没啥问题,但若是做正则匹配过滤字符,并且过滤字符后再用$(this).val()字符赋值,就将拼音直接写到input里面了!!!

为了解决这个问题,找到了compositionstart和compositionend这对属性,这两个分别在浏览器有非直接的文字输入时,以及当浏览器有非直接的文字输入结束时处罚,具体用法参考示例见源码:

<html>
<head>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" defer></script>
</head>
<body><input style="width: 100%;height: 30px;" id="inputid">
<script type="text/javascript">
	window.onload = function(){
		//输入框的值改变时触发
		var cpLock = false;
		$('#inputid').on('compositionstart',function(){
			cpLock = true;
			console.log(1)
		})
		$('#inputid').on('compositionend',function(){
			cpLock = false;
			console.log(2)
		})
	    $("#inputid").on("change",function(e){
	    	if(!cpLock){
	    		console.log($(this).val())
	    	}
	    });
	}
</script>
</body>
</html>

参考文章:http://blog.sina.com.cn/s/blog_69ec42d50102wqok.html

感谢看完指鹤文章,希望指鹤的文章对您有所帮助。

闲暇时,指鹤喜欢写一些文章,部分发表在了豆瓣,若是您对此感兴趣,您可以点击下面连接支持下指鹤,指鹤在此表示感谢了

绝命笔记 一封匿名信引发的追寻 迷案追凶 量子危机