中文输入法不触发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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
Vue父子传递实例讲解
Feb 14 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
javascript中的隐式调用
2018/02/10 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python SQLite3简介
2018/02/22 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python如何对链表操作
2020/10/10 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
学术会议邀请函范文
2014/01/22 职场文书
教师个人剖析材料
2014/02/05 职场文书
全国文明单位申报材料
2014/05/31 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
英文慰问信范文
2015/03/24 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫