최근 개발된 프로젝트에서는 사용자가 WEB 형식으로 여러 개의 INPUT 상자에 수량을 입력한 후 입력된 수량의 합계가 자동으로 계산되어 지정된 INPUT 상자에 표시되도록 요구합니다. 이 기능은 원리가 간단합니다. 즉, INPUT의 onchange 이벤트에서 합계를 계산하고 지정된 INPUT 상자에 결과를 할당하기만 하면 됩니다.
이렇게 하면 해결될 줄 알았는데, IE 9에서는 INPUT에 수량을 입력하면 바로 변경 이벤트가 발생하지 않는 것을 발견했습니다. 많은 사람들이 이 문제가 존재한다고 말하는데, 구현을 기반으로 직접 작성해야 합니다. 내 생각은 INPUT이 포커스를 받으면 현재 VALUE를 가져와서 사용자 정의 속성에 저장하는 것입니다. INPUT.(예: data-oval), INPUT이 포커스를 잃으면 현재 VALUE가 이전에 사용자 정의된 속성의 값과 동일한지 확인합니다. 그렇지 않은 경우 VALUE가 변경되었으며 이를 수행해야 함을 의미합니다. 그렇지 않으면 무시합니다. 구현 코드는 다음과 같습니다.
재확인 후 모든 브라우저에서 정상적으로 표시되어 호환성 문제가 해결되었습니다!