js는 onpropertychange, oninput_javascript 기술의 입력 상자 값의 즉각적인 변화를 모니터링합니다.
- WBOY원래의
- 2016-05-16 18:04:47945검색
달성할 효과
많은 경우 우리는 웹사이트의 사용자 경험을 향상시키기 위해 시청자에게 즉각적인 조치를 취하기 위해 입력 상자 값의 변화를 실시간으로 모니터링합니다. 예를 들어 입력창에 입력된 바이트 수를 바로 표시해 주거나, 구글의 연관 검색 효과인 검색 안내를 위해 입력된 값을 바로 읽어주는 등의 기능을 할 수 있습니다.
즉석 이벤트를 캡처할 수 있다면 많은 일을 할 수 있습니다.
알아야 할 사항
우선 onchange와 onpropertychange의 차이점을 이해해야 합니다.
IE에서는 HTML 요소의 속성이 변경될 때 onpropertychange를 통해 즉시 캡처됩니다.
onchange는 속성 값이 변경될 때 이벤트가 활성화되기 전에 현재 요소가 포커스를 잃게 해야 합니다(onblur).
이를 이해한 후 우리는 onpropertychange의 효과가 우리가 원하는 것임을 알았지만 안타깝게도 IE에서만 작동합니다. onpropertychange를 교체할 다른 시간을 찾을 수 있나요?
정보를 읽은 후 oninput 이벤트를 사용하면 다른 브라우저에서도 동일한 효과를 얻을 수 있다는 것을 알게 되었습니다. IE 브라우저만 구별하면 됩니다.
oninput 사용법
먼저 oninput 사용법을 알아보겠습니다.
등록 시간을 페이지에 직접 적으면 다음과 같은 작성 방법을 얻을 수 있습니다.
단, oninput을 JS 코드로 작성하여 분리할 경우 일반적인 이벤트 등록 방법과 다소 다릅니다. addEventListener를 사용하여 등록해야 합니다. Mozilla 시리즈에서는 addEventListener 메소드가 사용됩니다예:
document.getElementById("btn").onclick = method1 document.getElementById("btn"). onclick = method2;
document.getElementById("btn").onclick = method3
이렇게 작성하면 medhot3만 실행됩니다.
다음과 같이 작성합니다.
var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2) btn1Obj.attachEvent("onclick" ,method3) ;
실행 순서는 method3->method2->method1 Mozilla 시리즈인 경우 이 메서드는 지원되지 않으며 addEventListener를 사용해야 합니다.
var btn1Obj = document.getElementById ("btn1"); btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false)
btn1Obj.addEventListener("click",method3 ,false);
실행 순서는 method1->method2->method3
addEventListener를 사용하여 oninput 이벤트를 등록하는 방법을 이해한 후 해결해야 할 문제(브라우저 분할)로 돌아갈 수 있습니다.
IE 브라우저 판단
IE를 어떻게 구별하나요?
이것은 인터넷에서 찾는 방법이 여러 가지인 것 같습니다. 두 가지 범주로 분류됩니다.
하나는 브라우저의 기능적 속성을 결정하는 것입니다.
두 번째는 가장 오래되고 가장 널리 사용되는 탐지 방법일 수 있는 전통적인 사용자 에이전트 문자열을 판단하는 것입니다. 여기에서는 자세한 내용을 다루지 않겠습니다.
코드 복사
지금까지 겪었던 문제는 해결되었고, 아이디어가 실현될 수 있는지 테스트하기 위해 코드 작성을 시작했습니다.
코드 완성:
코드 복사
코드는 다음과 같습니다:
페이지에 직접 작성한 예:
< ;input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value ;" />
< ; br />
JS로 작성된 예:
많은 경우 우리는 웹사이트의 사용자 경험을 향상시키기 위해 시청자에게 즉각적인 조치를 취하기 위해 입력 상자 값의 변화를 실시간으로 모니터링합니다. 예를 들어 입력창에 입력된 바이트 수를 바로 표시해 주거나, 구글의 연관 검색 효과인 검색 안내를 위해 입력된 값을 바로 읽어주는 등의 기능을 할 수 있습니다.
즉석 이벤트를 캡처할 수 있다면 많은 일을 할 수 있습니다.
알아야 할 사항
우선 onchange와 onpropertychange의 차이점을 이해해야 합니다.
IE에서는 HTML 요소의 속성이 변경될 때 onpropertychange를 통해 즉시 캡처됩니다.
onchange는 속성 값이 변경될 때 이벤트가 활성화되기 전에 현재 요소가 포커스를 잃게 해야 합니다(onblur).
이를 이해한 후 우리는 onpropertychange의 효과가 우리가 원하는 것임을 알았지만 안타깝게도 IE에서만 작동합니다. onpropertychange를 교체할 다른 시간을 찾을 수 있나요?
정보를 읽은 후 oninput 이벤트를 사용하면 다른 브라우저에서도 동일한 효과를 얻을 수 있다는 것을 알게 되었습니다. IE 브라우저만 구별하면 됩니다.
oninput 사용법
먼저 oninput 사용법을 알아보겠습니다.
등록 시간을 페이지에 직접 적으면 다음과 같은 작성 방법을 얻을 수 있습니다.
단, oninput을 JS 코드로 작성하여 분리할 경우 일반적인 이벤트 등록 방법과 다소 다릅니다. addEventListener를 사용하여 등록해야 합니다. Mozilla 시리즈에서는 addEventListener 메소드가 사용됩니다예:
document.getElementById("btn").onclick = method1 document.getElementById("btn"). onclick = method2;
document.getElementById("btn").onclick = method3
이렇게 작성하면 medhot3만 실행됩니다.
다음과 같이 작성합니다.
var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2) btn1Obj.attachEvent("onclick" ,method3) ;
실행 순서는 method3->method2->method1 Mozilla 시리즈인 경우 이 메서드는 지원되지 않으며 addEventListener를 사용해야 합니다.
var btn1Obj = document.getElementById ("btn1"); btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false)
btn1Obj.addEventListener("click",method3 ,false);
실행 순서는 method1->method2->method3
addEventListener를 사용하여 oninput 이벤트를 등록하는 방법을 이해한 후 해결해야 할 문제(브라우저 분할)로 돌아갈 수 있습니다.
IE 브라우저 판단
IE를 어떻게 구별하나요?
이것은 인터넷에서 찾는 방법이 여러 가지인 것 같습니다. 두 가지 범주로 분류됩니다.
하나는 브라우저의 기능적 속성을 결정하는 것입니다.
두 번째는 가장 오래되고 가장 널리 사용되는 탐지 방법일 수 있는 전통적인 사용자 에이전트 문자열을 판단하는 것입니다. 여기에서는 자세한 내용을 다루지 않겠습니다.
코드 복사
코드는 다음과 같습니다. if("v"=="v") { alert("IE") }else{ alert("NO"); }
지금까지 겪었던 문제는 해결되었고, 아이디어가 실현될 수 있는지 테스트하기 위해 코드 작성을 시작했습니다.
코드 완성:
코드는 다음과 같습니다:
< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http ://www.w3.org/1999/xhtml"> onpropertychange oninput
입력 상자 값의 즉각적인 변경을 모니터링합니다. 페이지에 직접 작성한 예:
코드 복사 코드는 다음과 같습니다.
< ;input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value ;" />
입력한 값은 다음과 같습니다: 아직 입력되지 않았습니다
< ; br />
JS로 작성된 예:
입력한 값은 다음과 같습니다: 아직 입력되지 않았습니다