使用js复合事件处理中文输入的问题
2018-11-15 本文已影响0人
Jerry379
复合事件
复合事件和文本事件在很对地方很相似。在触发复合事件时。目标是接收文本的输入字段。但是它比文本事件对象多一个属性data,复合事件有以下三种：
-
compositionstart:在文本复合系统打开时触发，表示要输入了。此时
data值为正在编辑的文本(例如：已经选中的需要马上替换的文本) -
compositionupdate:在向字段中插入新字符时触发。此时，
data的值为正在插入的新字符。 -
compositionend:在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态。此时，
data的值为此次输入会话中插入的新字符。
复合事件主要的用处在于使用输入法编辑器时，往往需要使用多个键，但是最终只输入一个字符。复合事件就是为了检测和输入这种输入而设计的。例如：当我们需要在输入框中输入中文“张”的时候，需要输入zhang最后按回车键输入到输入框中。
当我们使用input事件时，输入中文拼音的过程中此时，此时中文并未显示在输入框中，但是依然会触发input事件
input监听事件
改为compositionend事件后
compositionend监听事件
<!DOCTYPE HTML>
<html>
<head>
<title>DOM3 event textInput</title>
</head>
<body>
<input id="ipt" type="text" />
<script type="text/javascript">
function addEvent(el, type, fn) {
if(el.addEventListener) {
el.addEventListener(type, fn, false);
} else {
el.attachEvent('on' + type, fn);
}
}
var ipt = document.getElementById('ipt');
addEvent(ipt, 'compositionstart', function(e) {
e = e || window.event;
console.log("compositionstart:"+e.data);
});
addEvent(ipt, 'compositionupdate', function(e) {
e = e || window.event;
console.log("compositionupdate:"+e.data);
});
addEvent(ipt, 'compositionend', function(e) {
e = e || window.event;
console.log("compositionend:"+e.data);
});
</script>
</body>
</html>
