입력 상자 value_javascript 기술의 oninput 및 onpropertychange 메소드에 대한 js 및 jquery 실시간 모니터링

이 글의 예시에서는 입력 상자 값을 실시간으로 모니터링하는 js 및 jquery의 oninput 및 onpropertychange 메서드에 대해 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

최근 프로젝트를 진행했는데, 드롭다운 상자에서 키워드를 자동으로 일치시키는 것이 요구 사항이었습니다. 구체적인 세부 사항은 텍스트 상자의 값 변화를 실시간으로 모니터링한 후 관련 내용을 일치시키는 것이었습니다. .

처음 프로젝트를 맡았을 때 가장 먼저 생각한 것은 JQ의 변경이었지만, 텍스트 상자가 포커스를 잃으면 변경이 발생하기 때문에 이 방법은 즉시 배제했습니다. 나라를 구하기 위해 키다운을 활용해서 해결하자고 생각했습니다. 키보드를 사용하는 대신 마우스를 사용하여 복사하고 붙여넣을 때 이 이벤트가 트리거될 수 없다는 점을 제외하면 다른 모든 것은 괜찮습니다. 그래서 이 방법도 제거되었습니다.

그런 다음 몇 가지 관련 정보를 확인한 결과 네이티브 js의 oninput 및 onpropertychange만이 이 요구 사항을 충족한다는 것을 발견했습니다. 그런 다음 JQ의 API로 가서 일치하는 방법을 찾지 못해 실망했습니다. 실제로 이와 같은 것을 바인딩합니다. 이벤트는 입력 및 속성 변경입니다. 테스트를 통과한 후에는 실제로 문제가 없습니다.

다음은 예입니다.

JQ：

$('input').bind('input propertychange', function() { 
 //进行相关操作 
});

그 중 propertychange는 IE9 이하 버전과의 호환성을 위한 것입니다.

JS의 oninput 이벤트는 IE9 이하 버전에서는 지원되지 않습니다. 이 이벤트는 사용자 인터페이스가 변경되거나 스크립트를 사용하여 콘텐츠가 직접 수정될 때 트리거됩니다. 다음 상황:

input:checkbox 또는 input:radio 요소의 selected 상태가 수정되었으며, selected 속성이 변경되었습니다.

input:text 또는 textarea 요소의 값이 수정되고 value 속성이 변경됩니다.
select 요소의 선택된 항목이 수정되고 selectedIndex 속성이 변경됩니다.
JS:

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.