onkeyup 이벤트가 발생하지 않는 중국어 입력 방법에 대한 해결 방법

onkeyup 이벤트가 발생하지 않는 중국어 입력 방법에 대한 해결 방법_기본 지식

WBOY

풀어 주다： 2016-05-16 16:42:16

원래의

1725명이 탐색했습니다.

지난 이틀 동안 텍스트 상자 입력의 실시간 모니터링이 필요한 기능을 작업하던 중 중국어 입력 방식에서는 onkeyup 이벤트가 발생하지 않는다는 역겨운 문제에 직면했습니다.

구체적인 성과는 다음과 같습니다.

입력의 keyup 이벤트를 들을 때, 영어 입력 방식의 경우 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>

로그인 후 복사

보시다시피, 이런 방식으로 작성하면 중국어가 키업 이벤트를 실행할 수 없다는 문제가 발생합니다. 그래서 해결책을 찾다가 Baidu의 검색창 프롬프트에는 이런 문제가 없는 것 같아서 Baidu의 js를 살펴보기 시작했습니다. Baidu의 js는 좀 못생겼네요... 메소드 이름은 모두 한 글자입니다. 결국 입력 상자의 수정 사항을 정기적으로 모니터링하기 위해 타이머를 만들기 위해 timeout을 사용한 것으로 보입니다. 이 방법은 별로 만족스럽지 않습니다. 그래서 더 나은 해결책이 있는지 계속 검색한 결과 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>

로그인 후 복사

문제가 해결되었습니다.