工作手记之移动端中文输入法触发oninput事件的解决方法

姘存按发布于2019-08-20 12:21 / 2775人阅读

摘要：经过在网上的查找，找到了和两个事件进行一个开关判断。关于事件是的标准事件，对于检测和这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像事件需要失去焦点才触发。补充最近测试了下发现在事件之后才触发。。。

事件背景

工作过程中涉及到了移动端输入内容长度的限定，这就要求需要对输入过程中内容的变化进行监控和判定，以决定是否可以继续输入，所以就想着是否可以在相关输入处监听oninput事件？但是在手机端，中文输入过程中，默认输入框里面会显示相关的英文字母，这个时候会触发oninput事件，但是这个时候输入并没有结束，所以导致判断时机不正确。经过在网上的查找，找到了compositionstart和compositionend两个事件进行一个开关判断。

关于oninput事件

oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。 oninput 事件兼容为ie9+, ie下可以onpropertychange事件，不是本节内容。

compositionstart

当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend

当浏览器是直接的文字输入时, compositionend会以同步模式触发.

看了两个事件就明白,开始中文输入时会触发compositionstart事件选词结束后会触发compositionend事件,忽略这两个事件之间的input事件即可，为元素添加这个两个事件，做一个开关，如下:



var node = document.querySelector("#sample");
var inputLock = false;
node.addEventListener("compositionstart", function(){
    inputLock = true;
})
node.addEventListener("compositionend", function(){
    inputLock = false;
})
node.addEventListener("input", function(){
    if(!inputLock )
    // do something for input limit
});

总结

通过上面上面两个事件就可以解决移动端中文输入法触发input事件的问题了。

2016/11/23补充

最近测试了下发现：

compositionend 在 input 事件之后才触发 so。。。

于是只能在compositionend 里也加上处理代码

复制代码

node.addEventListener("compositionstart", function(){
    cpLock = true;
})

node.addEventListener("compositionend", function(){
    cpLock = false;
     if(!cpLock)console.log(this.value);
})

node.addEventListener("input", function(){
    if(!cpLock)console.log(this.value);
});

感觉还是好坑，不能算是完美的解决这个问题，暂时只能先这样处理填坑了，大家有好的方法麻烦留言告诉下:)

GPU云服务器云服务器 js 输入时触发事件 java中文乱码解决之道 webrtc手记之videoengine 事件触发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80933.html

解决oninput事件在中文输入法下会取得拼音的值的问题

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 wm 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositio...

gclove 2019-08-01 18:16 评论0 收藏0
解决oninput事件在中文输入法下会取得拼音的值的问题

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 wm 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositio...

wangbjun 2019-08-22 11:21 评论0 收藏0
解决onKeypress中文输入不触发问题

摘要：在对文本绑定时，输入数字字母特殊符号是都会触发事件，但唯独输入中文时，事件是不会触发的我觉得可以使用事件代替是的标准事件，对于检测和这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像事件需要失去焦点才触发。 onKeypress事件会在键盘按键被按下并释放一个键时发生。在对input文本绑定时，输入数字、字母、特殊符号是都会触发onKeypress事件，但唯独输...

sewerganger 2019-08-29 12:16 评论0 收藏0