입력 상자 값의 oninput 및 onpropertychange 메서드에 대한 js 및 jquery 실시간 모니터링

高洛峰
풀어 주다: 2017-02-03 14:10:30
원래의
1877명이 탐색했습니다.

이 글의 예시에서는 입력 상자 값을 실시간으로 모니터링하는 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 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!