입력 변경 이벤트의 비호환 문제에 대한 jQuery의 솔루션에 대한 자세한 설명

이 기사는 IE9에서 변경이벤트가 즉시 발생하지 않는다는 것을 프로젝트에서 발견한 내용을 기록합니다. 호환성 문제에 대한 해결 프로세스도 해결 과정에서 나타났으며 최종적으로 해결되어 완벽하게 달성되었습니다. 모든 주요 주류 브라우저와의 호환성

최근 사용자가 WEB 형식으로 여러 INPUT 상자에 수량을 입력한 후 즉시 입력 수량의 합을 자동으로 계산하여 지정된 INPUT 상자에 표시하도록 요구하는 프로젝트를 개발했습니다. 함수 구현 원리는 간단합니다. 즉, INPUT의 onchange 이벤트에서 합계를 계산하고 그 결과를 지정된 INPUT 상자에 할당하기만 하면 됩니다. 코드는 다음과 같습니다.

$("input.syxcost").change(function(){
   computeReceivedsyxcost();
}
function computeReceivedsyxcost(){  //计算加总
              var syxcost=0;
              $("input.syxcost").
each
(function(){
                 var cost=parse
Float
($(this).val());
                 if (!isNaN(cost))
                    syxcost=syxcost + cost;
              });
              $("#receivedsyxcost").val(syxcost); //显示最终结果
           }

이렇게 하면 문제가 해결될 것이라고 생각했습니다. 문제는 구글 크롬에서는 괜찮은데 IE 9에서는 INPUT에 금액을 입력하면 즉시 변경 이벤트가 발생하지 않는다는 것을 발견했습니다. 인터넷에서 많이 검색해 보니 다들 그렇더군요. 이 문제는 존재하며 해결책이 없습니다. 구현을 기반으로 직접 작성해야 합니다. 내 생각은 INPUT이 포커스를 받으면 현재 VALUE를 가져와 INPUT의 사용자 정의 속성 에 저장하는 것입니다. as: data-oval), INPUT이 포커스를 잃으면 현재 VALUE가 이전에 사용자 정의된 속성의 값과 동일한지 확인합니다. 동일하지 않으면 VALUE가 변경되었으며 이를 변경해야 함을 의미합니다. 그렇지 않으면 무시됩니다. 구현 코드는 다음과 같습니다.

$("input.syxcost").focus(function(){
                $(this).attr("data-oval",$(this).val()); //将当前值存入自定义属性
            }).blur(function(){
                var oldVal=($(this).attr("data-oval")); //获取原值
                var 
new
Val=($(this).val()); //获取当前值
                if (oldVal!=newVal)
                {
                    computeReceivedsyxcost(); //不相同则计算
                }
            });

반복 검증 후 모든 브라우저에서 정상적으로 표시되어 호환성 문제가 해결되었습니다!

위 내용은 입력 변경 이벤트의 비호환 문제에 대한 jQuery의 솔루션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!