中文输入法不触发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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
layui radio性别单选框赋值方法
Aug 15 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php模板原理讲解
2013/11/13 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python中标准模块importlib详解
2017/04/16 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
大专应届生个人简历的自我评价
2013/10/15 职场文书
党员干部公开承诺书
2014/03/26 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
科学发展观活动总结
2014/08/28 职场文书
2016猴年春节问候语
2015/11/11 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android