텍스트 입력 필드의 실시간 변경 사항을 추적하는 방법은 무엇입니까?

입력 텍스트 필드의 실시간 변경 사항을 추적하는 가장 좋은 방법

input type="text"를 활용하면 사용자가 포커스를 떠난 후에만 onchange 이벤트가 발생하는 경우가 많습니다. 현장에서. 변경 사항을 추적해야 하는 경우 문제가 될 수 있습니다.

즉시 추적을 위한 브라우저 지원

최신 브라우저는 oninput 이벤트를 통해 솔루션을 제공합니다. 이 이벤트는 텍스트 필드의 내용이 변경될 때마다 트리거됩니다. onchange를 거의 완벽하게 대체하여 요소에서 초점을 잃을 필요 없이 실시간 모니터링을 제공합니다. 모바일 브라우저를 포함한 모든 주요 브라우저에서 지원됩니다.

크로스 브라우저 호환성

IE8 이하를 포함한 구형 브라우저의 경우 onpropertychange 이벤트와 oninput 이벤트의 조합으로 크로스 브라우저 호환성을 보장할 수 있습니다. 브라우저 호환성.

코드 예제

다음은 브라우저 간 추적을 위해 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 completeness, include listen for option changes which won't trigger either input or change
source.addEventListener('change', inputHandler);

호환되지 않는 브라우저의 경우 oninput 또는 onchange를 지원하지 않는 경우 setTimeout 함수를 대안으로 사용할 수 있지만 앞서 언급한 솔루션만큼 우아하거나 효율적이지는 않습니다.

위 내용은 텍스트 입력 필드의 실시간 변경 사항을 추적하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!