초점을 잃지 않고 실시간 입력 변경 사항을 추적하려면 어떻게 해야 합니까?

초점을 잃지 않고 'onchange'를 사용하여 실시간으로 입력 변경 추적

"텍스트" 유형의 입력 컨트롤은 일반적으로 " onchange" 이벤트는 사용자가 필드를 떠날(흐리게) 경우에만 발생합니다. 이러한 제한은 사용자가 입력할 때 변경 사항을 추적할 때 실망스러울 수 있습니다.

다행히도 최신 브라우저는 "oninput"이라는 더 나은 솔루션을 제공합니다. 이 이벤트 리스너는 텍스트 필드 내용의 실시간 업데이트를 제공하므로 초점을 잃을 필요가 없습니다. 호환성을 극대화하려면 IE 지원을 위해 "oninput"과 "onpropertychange"를 모두 사용하는 것이 좋습니다.

이 접근 방식을 보여주는 예:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerText = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8

브라우저 호환성에 대한 추가 참고 사항:

• "oninput"은 모든 주요 항목에서 지원됩니다. 모바일 브라우저를 포함한 브라우저.
• IE8 이하는 "onpropertychange" 이벤트가 필요합니다.
• "onchange"는 포커스를 잃은 후 지연되기 때문에 입력 시 변경 사항을 추적하는 데 적합하지 않습니다.

위 내용은 초점을 잃지 않고 실시간 입력 변경 사항을 추적하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!