입력 태그 내용 변경으로 인해 발생하는 이벤트에 대한 자세한 설명(예제 포함)

이 글은 입력 태그 내용 변경으로 인해 발생하는 이벤트에 대한 자세한 설명을 제공합니다(예시 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

네이티브 메소드

onchange 이벤트

<input type="text" onchange="onc(this)">

function onc(data){
    console.log(data.value);
}

onchange 이벤트는 콘텐츠가 변경되어 포커스를 잃을 때 트리거됩니다. 즉, 포커스를 잃었는데 내용이 변하지 않는다면, 내용이 바뀌었지만 포커스를 잃지 않았다면 실시간으로 발동되지 않을 것입니다.
js는 값이 직접 변경될 때 트리거되지 않습니다.

oninput 이벤트

<input id="inp" type="text" oninput="inp(this)">

function inp(data) {
    console.log(data.value)
}

oninput 이벤트는 입력 내용이 변경될 때 실시간으로 트리거됩니다. oninput 이벤트는 IE를 제외한 대부분의 브라우저에서 지원하는 이벤트로, 값이 변경될 때 실시간으로 발생합니다.
js는 값이 직접 변경되면 트리거되지 않습니다.

onpropertychange 이벤트

onpropertychange 이벤트는 캐릭터가 추가되거나 삭제될 때마다 발생합니다. 이 이벤트는 js 변경으로도 발생하지만 이 이벤트는 IE에만 ​​적용됩니다.
입력이 비활성화=true로 설정되면 트리거되지 않습니다.

oninput 이벤트와 onpropertychange 이벤트의 차이점:

onpropertychange 이벤트는 속성이 변경될 때 발생하지만 oninput은 값이 변경될 때만 발생하며 addEventListener()를 통해 Oninput을 등록해야 하며 onpropertychange 등록 방법은 동일합니다. 일반행사로.

Oninput은 onpropertychange와 함께 사용됩니다

　Oninput은 HTML5의 표준 이벤트로, 사용자 인터페이스를 통해 텍스트 영역, input:text, input:password 및 input:search 요소의 콘텐츠 변경을 즉시 감지하는 데 매우 유용합니다. 트리거되기 전에 포커스를 잃어야 하는 onchange 이벤트와 달리 콘텐츠가 수정된 후 트리거됩니다. IE9 이하 버전에서는 oninput 이벤트가 지원되지 않습니다. 대신 IE의 고유한 onpropertychange 이벤트를 사용해야 합니다. 이 이벤트는 사용자 인터페이스가 변경되거나 스크립트를 사용하여 콘텐츠가 직접 수정될 때 트리거됩니다. 수정된 입력: 체크박스 또는 입력:라디오 요소가 선택된 상태이고 체크된 속성이 변경됩니다.

input:text 또는 textarea 요소의 값이 수정되고 value 속성이 변경됩니다.

select 요소의 선택된 항목이 수정되었으며, selectedIndex 속성이 변경되었습니다.
　onpropertychange 이벤트를 청취한 후 해당 이벤트의 propertyName 속성을 사용하여 변경된 속성 이름을 가져올 수 있습니다.

　입력 상자 내용의 변경 사항을 모니터링하기 위해 oninput 및 onpropertychange를 수집하는 샘플 코드는 다음과 같습니다.

// Firefox, Google Chrome, Opera, Safari, Internet Explorer 버전 9

function OnInput (event) {
    alert ("The new content: " + event.target.value);
}

// Internet Explorer

function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
}

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

jQuery를 사용하세요

oninput과 onpropertychange 두 이벤트를 동시에 바인딩하면 됩니다. 샘플 코드는 다음과 같습니다.

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

마지막으로 주의할 점은 oninput과 onpropertychange 두 이벤트에 IE9에 작은 버그가 있다는 것입니다. 즉, 오른쪽 클릭 메뉴를 통해 콘텐츠를 삭제할 때 잘라내기 및 삭제 명령이 실행되지 않지만 다른 버전의 IE에서는 정상입니다.

위 내용은 입력 태그 내용 변경으로 인해 발생하는 이벤트에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!