>  기사  >  웹 프론트엔드  >  jQuery는 process_jquery를 해결하는 입력 변경 이벤트 문제와 호환되지 않습니다.

jQuery는 process_jquery를 해결하는 입력 변경 이벤트 문제와 호환되지 않습니다.

WBOY
WBOY원래의
2016-05-16 16:29:051375검색

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

코드 복사 코드는 다음과 같습니다.

$("input.syxcost").change(function(){
계산수신syxcost();
}
function ComputeReceivedsyxcost(){ //합계 계산
              var syxcost=0;
                  $("input.syxcost").each(function(){
              var cost=parseFloat($(this).val());
If (!isNaN(비용))
                      syxcost=syxcost 비용;
              });
                  $("#receivedsyxcost").val(syxcost) //최종 결과 표시
           }

이렇게 하면 해결될 줄 알았는데, IE 9에서는 INPUT에 수량을 입력하면 바로 변경 이벤트가 발생하지 않는 것을 발견했습니다. 많은 사람들이 이 문제가 존재한다고 말하는데, 구현을 기반으로 직접 작성해야 합니다. 내 생각은 INPUT이 포커스를 받으면 현재 VALUE를 가져와서 사용자 정의 속성에 저장하는 것입니다. INPUT.(예: data-oval), INPUT이 포커스를 잃으면 현재 VALUE가 이전에 사용자 정의된 속성의 값과 동일한지 확인합니다. 그렇지 않은 경우 VALUE가 변경되었으며 이를 수행해야 함을 의미합니다. 그렇지 않으면 무시합니다. 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("input.syxcost").focus(function(){
                   $(this).attr("data-oval",$(this).val()) //현재 값을 맞춤 속성에 저장
               }).blur(function(){
                   var oldVal=($(this).attr("data-oval")) //원래 값 가져오기
              var newVal=($(this).val()) //현재 값 가져오기
If (oldVal!=newVal)
                                             {
ComputeReceivedsyxcost(); //동일하지 않으면 계산
                }
            });

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.