中文输入法不触发onkeyup事件的解决办法
2015-07-04 00:00
183 查看
摘要: 这篇文章主要介绍了中文输入法不触发onkeyup事件的解决办法,需要的朋友可以参考下
这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题。
具体表现是这样的:
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发。这是最先前的写法。
如你所见,这样的写法遇到了中文不能触发keyup事件的问题。于是寻求解决方法,想起来baidu的搜索栏提示似乎是没有这个问题的,于是开始看百度的js。百度的js比较难看...方法命名净是一个字母,最后发现大概是使用了timeout做一个定时器来定时监测input框的修改。不是很满意这样的方法。于是继续查找看有没有更好的解决办法,于是就找到了oninput和onpropertychange两个事件。
oninput是firefox下面可用,而onpropertychange则是ie下可用。两个方法有着一些区别。
oninput只能检测到value这个属性的变化,而onpropertychange则可以检测到包含value的所有属性的变化。于是开始改成这个样子。
这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题。
具体表现是这样的:
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发。这是最先前的写法。
<html> <head> <script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script> </head> <body> <p> 使用keyup事件检测文本框内容: </p> <p> <input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/> <span id="keyup_s"></span> <script type="text/javascript"> $('#keyup_i').bind('keyup', function(){ $('#keyup_s').text($(this).val()); }) </script> </p> </body> </html>
如你所见,这样的写法遇到了中文不能触发keyup事件的问题。于是寻求解决方法,想起来baidu的搜索栏提示似乎是没有这个问题的,于是开始看百度的js。百度的js比较难看...方法命名净是一个字母,最后发现大概是使用了timeout做一个定时器来定时监测input框的修改。不是很满意这样的方法。于是继续查找看有没有更好的解决办法,于是就找到了oninput和onpropertychange两个事件。
oninput是firefox下面可用,而onpropertychange则是ie下可用。两个方法有着一些区别。
oninput只能检测到value这个属性的变化,而onpropertychange则可以检测到包含value的所有属性的变化。于是开始改成这个样子。
<html> <head> <script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script> </head> <body> <p> 使用oninput以及onpropertychange事件检测文本框内容: </p> <p> <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/> <span id="inputorp_s"></span> <script type="text/javascript"> //先判断浏览器是不是万恶的IE,没办法,写的东西也有IE使用者 var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1){ bind_name = 'propertychange'; } $('#inputorp_i').bind(bind_name, function(){ $('#inputorp_s').text($(this).val()); }) </script> </p> </body> </html>
相关文章推荐
- 较复杂的ListView
- GDB调试之TUI
- UITableViewCell绘制分割线
- 低压配网负荷监控的ZigBee通信管理机
- ehcache-rmi-广播测试程序
- 安卓学习之计算器样式
- eclipse 4.4 fatjar安装问题
- Android中 dp,px,dpi三者之间的关系
- ueditor空行问题
- Genymotion用charles抓包
- 各个平台看 docset 的工具
- Linux常用的网络命令
- 外贸网站使用国外空间好吗?
- 小米目标锁定巴西市场,红米2定价160美元
- Android蓝牙开发的一点总结
- IOS 面试题(三)
- IOS 面试题(四)
- Xcode6下新建XMPP项目导入框架详解
- HashMap与ConcurrentHashMap的区别
- mysql_fetch_array:数据库&二维数组