中文输入法不触发onkeyup事件的解决办法


Posted in Javascript onJuly 09, 2014

这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题。

具体表现是这样的:

当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发。这是最先前的写法。

<html>
<head>
<script type="text/javascript" src="https://3water.com/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="https://3water.com/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>

问题这么被解决了。

Javascript 相关文章推荐
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
js中将String转换为number以便比较
Jul 08 #Javascript
JS循环遍历JSON数据的方法
Jul 08 #Javascript
jquery获取选中的文本和值的方法
Jul 08 #Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 #Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 #Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 #Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
You might like
PHP版自动生成文章摘要
2008/07/23 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
项目经理任命书内容
2014/06/06 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
关于长城的导游词
2015/01/30 职场文书
安全生产标语口号
2015/12/26 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python