Explication détaillée de la solution de jQuery au problème d'incompatibilité de l'événement de changement d'entrée

Cet article enregistre la découverte dans le projet que le changementévénement ne sera pas déclenché immédiatement dans IE9. Le processus de résolution des problèmes de compatibilité est très détaillé. De nouveaux problèmes sont également apparus au cours du processus de résolution, et ils. ont finalement été résolus. Il est parfaitement compatible avec tous les principaux navigateurs grand public

Un projet récemment développé nécessite que l'utilisateur calcule automatiquement la somme des quantités saisies après avoir saisi les quantités dans plusieurs zones de SAISIE du formulaire WEB. affiché dans la zone INPUT spécifiée. Le principe d'implémentation de cette fonction est simple, c'est-à-dire qu'il vous suffit de calculer la somme dans l'événement onchange de INPUT et d'attribuer le résultat à la zone INPUT spécifiée. est le suivant :

$("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); //显示最终结果
           }

Je pensais que cela résoudrait le problème. C'est effectivement OK dans Google Chrome, mais dans IE 9, j'ai constaté qu'après avoir entré le montant dans INPUT, l'événement de changement ne serait pas. déclenché immédiatement. , il y a un problème de compatibilité. J'ai beaucoup cherché sur Internet et ils ont tous dit que ce problème existait. Je ne dois pas l'écrire moi-même en fonction de l'implémentation. focus, obtenez la VALEUR actuelle et coexistez. Entrez l'attribut personnalisé de l'ENTRÉE (tel que : data-oval), puis lorsque l'ENTRÉE perd le focus, déterminez si la VALEUR actuelle est la même que la valeur. dans l'attribut personnalisé précédent. Si s'ils ne sont pas identiques, cela signifie que la VALEUR a été modifiée et doit être recalculée, sinon elle sera ignorée. Le code d'implémentation est le suivant :

$("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(); //不相同则计算
                }
            });

. Après vérification répétée, il s'affiche normalement dans tous les navigateurs, résolvant ainsi le problème de compatibilité !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!