onPropertyChange onChange onInput 이벤트

4648 단어 브라우저functionIEinputfirefoxSafari
입력 텍스트 내용에 따라 고도의textarea에 적응할 때 발생하는 문제를 설계하고 코드를 보십시오:
<textarea name="textarea" id="textarea" onpropertychange="autoExtend(this)" oninput="autoExtend(this)">     ...</textarea>
function autoExtend(obj){
	obj.style.height = obj.scrollHeight + "px";
}

트리거 이벤트는 왜 호환성이 더 좋은 onchange를 선택하지 않습니까?먼저 onchange, onpropertychange, oninput 이 세 사건 핸들(Event Handlers)이 어떤 차이가 있는지 알아야 한다.
  • onchange 트리거 이벤트는 반드시 두 가지 조건을 만족시켜야 한다. 1. 현재 대상의 속성이 바뀌고 키보드나 마우스 이벤트가 자극하는 것(스크립트 트리거는 무효), 2. 현재 대상이 초점을 잃는 것(onblur).
  • onpropertychange면 현재 대상의 속성이 바뀌면 이벤트를 촉발하기 때문에 용도가 더욱 광범위하지만 IE only가 아쉽다.
  • oninput는 onpropertychange의 비IE 브라우저 버전으로 Firefox와opera 등 브라우저를 지원하지만 조금 다르다. 대상에 귀속될 때 이 대상의 모든 속성 변화가 이벤트를 촉발하는 것은 아니다. 내가 알기로는 대상value의 값이 바뀔 때만 효과가 나타난다.테스트 코드는 다음과 같습니다.


    •  
    비IE 호환성:
     
    텍스트 상자에 데이터를 입력할 때 키보드를 누르고 놓을 때 onkeyup을 사용하여 이벤트를 감지할 수 있습니다. onpropertychange는 매번 변경 사항을 포착할 수 있고, onchange는 어떤 이벤트를 실행해야만 포착할 수 있습니다.그러나 때때로 우리가 데이터를 입력하는 것은 키보드 입력이 아니라 붙이는 방식을 사용하기 때문에 텍스트 상자 상태의 변화를 실시간으로 검사해야 한다.onpropertychange는 Firefox에서 지원하지 않습니다. Firefox에서 정상적으로 사용하려면oninput 속성을 사용하고ddEventListener로 이벤트를 등록해야 합니다.
    //상태가 바뀔 때 실행하는 함수function handle () {
      document.getElementById('msg').innerHTML='입력한 텍스트 길이는'+document.getElementById('txt').value.length; }//Firefox에서 상태 변경을 감지하려면oninput만 사용할 수 있고, 이벤트를 등록하려면ddEvent Listener가 필요합니다.if (/msie/i.test (navigator.userAgent)//ie 브라우저 {
       document.getElementById('txt').onpropertychange=handle}else {//비ie 브라우저, 예를 들어Firefox document.getElementById('txt').addeventListener('input',handle,false);} 

    <html> 
    <body> 
    <div>oninput  </div> 
    <div id="testdiv"><input id='tx1' name="tx1" value="" /></div> 
    </body> 
    </html> 
    <script language="JavaScript"> 
    <!-- 
    function getOs(){//        
       var OsObject = ""; 
       if(navigator.userAgent.indexOf("MSIE")>0) { 
     	return "MSIE"; 
       } 
      if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    	return "Firefox"; 
       } 
       if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    	return "Safari"; 
       } 
       if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
    	return "Camino"; 
       } 
       if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
    	return "Gecko"; 
        }

    } 
    if(navigator.userAgent.indexOf("MSIE")>0){ 
      document.getElementById('tx1').attachEvent("onpropertychange",txChange); 
    }else if(navigator.userAgent.indexOf("Firefox")>0){ 
      document.getElementById('tx1').addEventListener("input",txChange2,false); 
    } 
    function txChange(){ 
      alert("testie"); 
    } 
    function txChange2(){ 
      alert("testfirefox"); 
    } 
    </script>
    C# 시작하기 - Hello World!
    (Node.js) MongoDB : Document를 JavaScript Object로 변환하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage