中文输入法不触发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获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
浅析Jquery操作select
Dec 13 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
onpropertypchange
2006/07/01 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript