中文输入法不触发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 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
Vue组件基础用法详解
Feb 05 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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 版获取重定向后的地址(代码)
2013/06/26 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Javascript之文件操作
2007/03/07 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
使用vue构建移动应用实战代码
2017/08/02 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
详解Python中的日志模块logging
2015/06/19 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python带参数打包exe及调用方式
2019/12/21 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
安全环保演讲稿
2014/08/28 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers