keypress不支持中文问题解决获取输入框新输入的内容中文输入过程中不截断获取光标的具体坐标

原创

于 2018-01-16 13:56:40 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#获取光标位置 #光标吐水动画 #输入框输入内容飞出效果 #中文输入过程不截断 #实时获取输入框输入内容

博主分享了一种解决keypress不支持中文问题的方法，通过创建一个随输入内容撑开的盒子来获取光标在输入框的具体位置，避免了字符类型判断的复杂性。同时，提供了代码下载链接，期待更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(this).keypress(function(e) {  //keypress可以获取到点击的键值 和对应的输入内容但在中文下不会触发
	 var c = String.fromCharCode(e.which);  //获取新输入的内容
 });

解决方法用oninput

$('.input_wrap input').on('input', function (event) {
			 	if ($(this).prop('comStart')) return;    // 中文输入过程中不截断
	            var thisval = $('.input_wrap input').val();
	        }).on('compositionstart', function (event) {
	            $(this).prop('comStart', true);
	        }).on('compositionend', function (event) { //在确定中文输入完成后触发获取输入框内容
	        	$('.input_wrap input').getCursorPosition();
	        	var nowdata=event.originalEvent.data; /获取本次新输入的输入框内容
	                $(this).parent().append("<span class='cl" + rand + "'>" + nowdata + "</span>");
		        $(this).prop('comStart', false);
	        });

获取光标的具体坐标

我找了好多方法，但是大都是获取当前输入框的字符数量，但是我觉