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

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

具体表现是这样的：

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

<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/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="http://www.jb51.net/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>

问题这么被解决了。

赞 (0)

相关推荐

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

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

    这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题. 具体表现是这样的: 当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发.这是最先前的写法. <html> <head> <script type="text/javascript" src="http://www.

  • jquery中trigger()无法触发hover事件的解决方法

    今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔. 1.trigger方法解释 官方是这么解释的: 复制代码 代码如下: Description: Execute all handlers and behaviors attached to the matched elements for the given event type. 用法: .trigger( eventType [, extraParameters] ) 其中eventType包含javascript内置的事件

  • jQuery动态添加元素无法触发绑定事件的解决方法分析

    本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法.分享给大家供大家参考,具体如下: 最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件.后来在网上查阅了一些资料,发现原来要这样处理: 先上我出错的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></ti

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • 关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

    最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台 model定义如下: var AddCourse= Backbone.Model.extend({ url:path+"/course/add", parse : function(response){ return response.data; } }); encodeURIComponent 函数 将中文的内容进行编码 $('#addCourseBtn' ).c

  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件. 解决办法:给grid对象添加collap

  • JSP struts2 url传参中文乱码解决办法

    JSP struts2 url传参中文乱码解决办法 1.设置struts.xml <constant name="struts.i18n.encoding" value="UTF-8" /> 或是设置struts.properties(我自己没试过) struts.i18n.encoding=UTF-8 2.在web.xml添加编码过滤器 <filter> <filter-name>characterEncodingFilter&

  • ViewPager和SlidingPaneLayout的滑动事件冲突解决方法

    问题描述: ViewPager和SlidingPaneLayout的滑动事件冲突. 问题分析: 在手指左右滑动时,SlidingPaneLayout会屏蔽ViewPager的滑动事件. 解决办法: 自定义SlidingPaneLayout类 import android.content.Context; import android.support.v4.view.MotionEventCompat; import android.support.v4.widget.SlidingPaneLay

  • Android ListView的item中嵌套ScrollView的解决办法

    前沿:有时候,listview 的item要显示的字段比较多,考虑到显示问题,item外面不得不嵌套ScrollView来实现,于是问题来了,当listview需要做点击事件时,由于ScrollView的嵌套使用,拦截了listvew点击事件:只好重写listview来实现了. /** * * @author 作者:易皇星 * * @da2016年10月24日 时间: * * @toTODO 类描述: 解决 ListView中嵌套ScrollView,ScrollView拦截ListView的I

  • suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,shift,alt,ctrl,num lock...庆幸的是enter拥有此事件 2. 对于字母,数字,press返回的keyCode是不可靠的 在IE和webkit 下 返回的是ASCII code firfox下永远返回0 但是 对

随机推荐