input输入框在输入中文时的compositionstart和compositionend事件

最新推荐文章于 2025-03-19 08:40:25 发布

昔别一展鲲鹏意

最新推荐文章于 2025-03-19 08:40:25 发布

阅读量6.5k

点赞数 4

分类专栏： input框输入中文 input框属性文章标签： compositionstart compositionend input 输入框中文

本文链接：https://blog.youkuaiyun.com/NoSuchObjectError/article/details/93193229

版权

input框输入中文同时被 2 个专栏收录

1 篇文章

订阅专栏

input框属性

1 篇文章

订阅专栏

input框在输入切换中文输入法时的输入事件
1、compositionstart
compositionstart事件只有在输入中文时才会触发，触发事件在input事件之前
如图，在输入中文时，先触发compositionstart事件，然后触发input事件打印输入的字符不是中文输入法则不会触发compositionstart事件
2、compositionend
compositionend表示结束中文输入时触发的事件，不管最后输入的是不是中文都会触发
如图可见compositionend事件是在input之后触发
3、input
input事件就是最后输入到输入框的事件
4、如何应用这些事件
利用这些事件，可以在输入中文的时候，保证在输入完毕之后才执行input事件的代码，不用每输入一个字符就执行一次input事件的代码了，如下图
如图，一次打一段话，只会触发一次input事件
下面是我的代码，做一下参考：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>input功能</title>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<input id="ahri" type="text"/>
		<script>
			$(() => {
				let typing = false;
				//  输入中文之前
				$('#ahri').on('compositionstart',function(event) {
					console.log('compositionstart');
					typing = true;
				})
				//  输入中文之后
				$('#ahri').on('compositionend',function(event) {
					console.log('compositionend');
					typing = false;
					input(event);
				})
				// 真正输入文字
				$('#ahri').on('input',input)
				function input(event) {
					//	正在输入中文时就不执行后面的代码
					if(typing) return;
					console.log(event.target.value);
				}
			})
		</script>
	</body>

</html>