Home > Article > Web Front-end > Solution to Chinese input method not triggering onkeyup event_Basic knowledge

Solution to Chinese input method not triggering onkeyup event_Basic knowledge

WBOYOriginal: 2016-05-16 16:42:161720browse

In the past two days, I have been working on a function that requires real-time monitoring of text box input, and encountered the disgusting problem that the Chinese input method cannot trigger the onkeyup event.

The specific performance is as follows:

When listening to the keyup event of an input, in the case of the English input method, the change in the value of the text box can be detected in real time through the keyup event. However, when the input method changes to Chinese, the keyup event of the input will not Triggered normally. This is the earliest way to write it.

<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>

As you can see, this way of writing encounters the problem that Chinese cannot trigger the keyup event. So I looked for a solution. I remembered that Baidu's search bar prompt did not seem to have this problem, so I started to look at Baidu's js. Baidu's js is rather ugly... The method names are all one letter. In the end, I found that I probably used timeout to make a timer to regularly monitor the modification of the input box. Not very satisfied with this method. So I continued to search to see if there was a better solution, and found the two events oninput and onpropertychange.

oninput is available under firefox, while onpropertychange is available under ie. There are some differences between the two methods.

oninput can only detect changes in the value attribute, while onpropertychange can detect changes in all properties containing value. So I started changing it to this.

<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>

The problem is solved.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript sets styles through the ID and name of the element_javascript tipsNext article：JavaScript sets styles through the ID and name of the element_javascript tips

See more

Solution to Chinese input method not triggering onkeyup event_Basic knowledge

Related articles