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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 04:42 PM

중국어 입력 방법

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

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

입력의 keyup 이벤트를 들을 때, 영어 입력 방식의 경우 keyup 이벤트를 통해 실시간으로 텍스트 박스의 값 변화를 감지할 수 있습니다. 중국어, 입력의 키업 이벤트가 정상적으로 트리거되지 않습니다. 이것이 가장 먼저 쓰는 방법입니다.

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;
    使用keyup事件检测文本框内容：
  &lt;/p&gt;
  &lt;p&gt;
    &lt;input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/&gt;
    &lt;span id="keyup_s"&gt;&lt;/span&gt;
    &lt;script type="text/javascript"&gt;
      $('#keyup_i').bind('keyup', function(){
        $('#keyup_s').text($(this).val());
      })
    &lt;/script&gt;
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

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

oninput은 firefox에서 사용할 수 있고 onpropertychange는 ie에서 사용할 수 있습니다. 두 가지 방법에는 약간의 차이점이 있습니다.

oninput은 value 속성의 변경 사항만 감지할 수 있는 반면, onpropertychange는 value를 포함하는 모든 속성의 변경 사항을 감지할 수 있습니다. 그래서 이걸로 바꾸기 시작했어요.

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;
    使用oninput以及onpropertychange事件检测文本框内容：
  &lt;/p&gt;
  &lt;p&gt;
    &lt;input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/&gt;
    &lt;span id="inputorp_s"&gt;&lt;/span&gt;
    &lt;script type="text/javascript"&gt;
      //先判断浏览器是不是万恶的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());
      })
    &lt;/script&gt;
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

문제가 해결되었습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.