입력 상자 값의 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 속성이 변경됩니다.

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

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

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

입력 상자 값의 실시간 모니터링을 위한 js 및 jquery의 oninput 및 onpropertychange 메서드와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!