input 事件兼容处理以及中文输入法优化
来源:互联网 发布:什么软件重装系统最好 编辑:程序博客网 时间:2024/05/16 05:32
问:移动端 js input事件如何解决输入汉字时,拼音在输入框内也会触发input事件;当汉字还未生成,这是拼音还在输入框内触发input。怎样避免这种情况?
答:
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 oninput 事件兼容为ie9+, ie下可以onpropertychange事件不是本节内容。
bug
- IE9下不触发退格/删除/剪切输入事件(IE9 doesn’t fire input event on backspace/del/cut)
- 当用户当前输入法状态是中文时,在未选择词组到输入框也会触发事件
解决
为元素添加 cut, keyup, 事件例:
_.on(el,'input',this.listener)// IE9 doesn't fire input event on backspace/del/cutif(_.isIE9){this.onCut =function() { _.nextTick(self.listener)}this.onDel =function(e) { if(e.keyCode ===46|| e.keyCode ===8) { self.listener() }} _.on(el,'cut',this.onCut) _.on(el,'keyup',this.onDel)}
来自于vuejs:
中文输入优化,我们想要的结果是只有词组进入了输入框才会触发事件。
我们可以使用两个较新的事件来达到预期的效果:compositionstart和compositionend,也是ie9+的兼容最合适不过。
MDN:
compositionstart
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发。
compositionend
当浏览器是直接的文字输入时, compositionend会以同步模式触发。
看了两个事件就明白,为元素添加这个两个事件,做一个开关,如下: html:
<input type="text" id="person" />
js:
var node = document.querySelector('#person');var cpLock = false;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);});
0 0
- input 事件兼容处理以及中文输入法优化
- <input>中中文输入时input事件处理
- input事件监听输入法事件
- firefox获取事件源以及swapNode兼容处理
- 中文输入法导致html input的onkeyup事件无法被触发,解决方法
- DOM2事件兼容处理
- input事件的处理
- input事件的处理
- html 中 input 禁用中文输入法
- 表单元素input事件兼容解决方案
- 处理input输入框被输入法遮住
- suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
- input子系统四 input事件处理
- input子系统四 input事件处理
- input子系统四 input事件处理
- ios端兼容input光标高度处理
- 浏览器兼容的事件处理
- 跨浏览器兼容事件处理
- SpringBoot--rabbimq Consumer
- leetcode---Find Minimum in Rotated Sorted Array---二分搜
- android 自定义状态栏颜色
- Assertion failed: (handlerType <= HandlerType::EVENT_CUSTOM_ENDED) 断言错
- java日志组件介绍(common-logging,log4j,slf4j,logback )
- input 事件兼容处理以及中文输入法优化
- with语句的用法
- UVa540
- 声压、音量﹑功率﹑分贝﹑波长、以及一些常人参数.
- git修改远程仓库地址
- 最大熵学习笔记(三)最大熵模型
- 排序相关算法之冒泡排序
- Timer的schedule和scheduleAtFixedRate方法的区别
- HTML drawimage方法 拍摄的为什么失真 总结的几个方法