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

2024-05-11 04:56:49

事件背景

工作过程中涉及到了移动端输入内容长度的限定，这就要求需要对输入过程中内容的变化进行监控和判定，以决定是否可以继续输入，所以就想着是否可以在相关输入处监听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事件即可，为元素添加这个两个事件，做一个开关，如下:

<input type="text" id="sample" />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);
});

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

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

移动端页面输入法挡住input输入框的解决方法
移动端页面输入法挡住input输入框的解决方法参考文章: (1)移动端页面输入法挡住input输入框的解决方法 (2)https://www.cnblogs.com/haqiao/p/7896922 ...
win7中计算机被改为了句号,WIN7中中文输入法快捷键无法修改的解决方法.doc
WIN7中,中文输入法快捷键无法修改的解决方法禁止中文输入法全角/半角切换的快捷键的方法控制面板 è 区域和语言 è 键盘和语言 è 更改按键 è 高级按键设置 è -- 但由于win7系统存在B ...
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. 参考文章: (1)form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. ( ...
Java NIO持续触发读事件的解决方法
1. 现象最近在一次项目编码中遇到这么一个情况: 程序本身是一个中间处理器的角色,功能可简述为接收硬件设备的报文,然后对某些报文处理(其他报文直接转发),然后发送服务端处理:服务端处理后回复,程序接 ...
中文输入法不触发onkeyup事件的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题. 具体表现是这样的: 当监听一 ...
解决手机端中文输入法中keyup不灵便的方法
项目中有一处需求是,搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有,后来切换到中文输入法,问题出来了,不灵便了,后来在网上搜了下,找到了思路,主要是给搜索框注 ...
win10 计算机管理器没有ime,win10电脑任务栏输入法初选ime禁用的解决方法
输入法是我们每天都是需要使用到的,现在输入法的选择是很多的,我们在安装中可以自由的选择,今天小编就来跟大家分享一下一个问题,很多的小伙伴在win10系统中遇到任务栏中输入法变成了一个ime禁用的问题, ...
win10c 系统语言英文,Win10英文版系统下中文软件显示为问号的解决方法
RegEx Dotext 1.0 β4.exe是一个强大的处理文本的小软件,感谢软件制作者sunsmile.但是安装了Windows 10英文版后,打开RegEx Dotext 1.0 β4.exe ...
jQuery使用blur()方法触发两次的解决方法
jQuery使用blur()方法触发两次的解决方法参考文章: (1)jQuery使用blur()方法触发两次的解决方法 (2)https://www.cnblogs.com/wgl1995/p/92 ...

最新文章

热门文章