zoukankan      html  css  js  c++  java
  • 中文输入法不触发onkeyup事件的解决办法

    具体表现是这样的:

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

    <html>
    <head>
    <script type="text/javascript" src="//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="//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>
    
  • 相关阅读:
    PAT 顶级 1010 Lehmer Code (35 分)
    PAT 顶级 1010 Lehmer Code (35 分)
    CCF CSP 201909-4 推荐系统
    CCF CSP 201909-4 推荐系统
    Codeforces 1251C Minimize The Integer
    Codeforces 1251C Minimize The Integer
    CCF CSP 201803-4 棋局评估
    CCF CSP 201803-4 棋局评估
    【DP_树形DP专题】题单总结
    【DP_树形DP专题】题单总结
  • 原文地址:https://www.cnblogs.com/sunala/p/10512567.html
Copyright © 2011-2022 走看看