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

前端技术 2023/09/08 JavaScript

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

具体表现是这样的：

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

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

问题这么被解决了。

本文地址：https://www.stayed.cn/item/20867

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案