IE11 se bloque en effaçant un formulaire avec 5 champs ou plus en utilisant JQuery $ (…) .val ("")

Si je nettoie un formulaire avec 5 champs ou plus dans IE11 en utilisant $ ('entrée de formulaire'). Val ("") IE11 va se bloquer. HTML:

<form> <label>1</label><input type="text"/> <label>2</label><input type="text"/> <label>3</label><input type="text"/> <label>4</label><input type="text"/> <label>5</label><input type="text"/> </form> 

JS:

 $(document).ready(function(){ $('#clearFormNormal').click(function(){ $("form input").val(""); }); }); 

Quand je fais ce récursif et avec un setTimeout, ça marche.

JS:

 function clearFields (counter) { var i = counter || 0, deferred = new $.Deferred(); if ($("form input").eq(i).length === 1){ setTimeout(function(){ $("form input").eq(i).val(""); i = i + 1; clearFields(i).always(function(){ deferred.resolve(); }); },0); } else { deferred.resolve(); } return deferred.promise(); } $(document).ready(function(){ $('#clearFormSetTimeout').click(function(){ clearFields(); }); }); 

Voir aussi http://jsfiddle.net/fransoverbeek/Cy5D5/7/

Est-ce un bug IE11?

  • Comment utiliser jQuery pour obtenir des éléments avec le même index z?
  • Comment vérifier les événements JQuery AJAX avec Jasmine?
  • Suppression de l'élément <link> avec jQuery?
  • Comment définir 'X-Frame-Options' sur iframe?
  • Comment rendre l'étiquette dans l'histogramme répondre à l'entrée utilisateur dynamique
  • JQuery File Upload - comment reconnaître quand tous les fichiers ont été téléchargés
  • Jquery / javascript, filtrage de l'objet html à partir d'une réponse ajax
  • Titres de D3.js sur le graphique dirigé par force repliable
  • 6 Solutions collect form web for “IE11 se bloque en effaçant un formulaire avec 5 champs ou plus en utilisant JQuery $ (…) .val ("")”

    Je crois qu'il s'agit d'un bug IE et j'ai créé le rapport de bug de connexion suivant: https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields- Avec jquery

    J'ai ajouté une version légèrement modifiée de votre fonction récursive là-bas en tant que travail. La fonction est légèrement plus générique et ressemble à ceci:

     function clearFields (counter, selector) { var i = counter || 0, deferred = new $.Deferred(); if (selector.eq(i).length === 1){ setTimeout(function(){ selector.eq(i).val(""); i = i + 1; clearFields(i, selector).always(function(){ deferred.resolve(); }); },0); } else { deferred.resolve(); } return deferred.promise(); } $(document).ready(function(){ $('#clearFormNormal').click(function(){ $("form input").val(""); }); $('#clearFormSetTimeout').click(function(){ clearFields(0, $("form input")); }); }); 

    Veuillez voter sur le problème de connexion.

    Fonctionnement de la fonction clearFields:

    Tout d'abord, notez que je n'ai pas écrit la fonction originale qui était basée sur, donc le pourquoi de ce travail n'est qu'une conjecture de ma part.

    La fonction clearFields est une fonction récursive. Chaque fois qu'il s'exécute, il faut deux paramètres: le compteur (qui est l'index dans l'ensemble des champs à effacer) et le sélecteur (l'objet jquery qui contient l'ensemble des champs à effacer)

    La fonction crée des regards sur l'élément spécifié par le compteur dans l'ensemble des éléments DOM spécifiés par le sélecteur. Si un tel élément existe, il crée un setTimeout asynchrone qui effacera cet élément. Cette fonction asynchique augmente le compteur (qui s'appelle i ici) et appelle récursivement clearFields. Je crois que la récursivité est la clé car j'ai essayé d'utiliser un setTimeout en boucle et cela n'a pas fonctionné.

    La récursivité s'arrête lorsque le compteur dépasse l'indice du dernier élément dans la collection qui est quand selector.eq (compteur) .length! == 1

    Je pense que cette fonction pourrait encore être améliorée en échangeant l'ordre des paramètres du compteur et du sélecteur afin que le compteur soit optionnel pour le premier appel.

    Je n'ai jamais eu besoin d'utiliser le code jQuery différé avant, alors je ne sais pas quel rôle joue dans cette fonction.

    Je crois que c'est un bug d'IE et qu'il n'est pas lié à jQuery, car il est possible de le montrer simplement par la page html suivante comme:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta> <title>test</title> </head> <body> <form id="form_1"> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="text" value="" size="10"/><br/> <input type="button" value="reset" onclick="document.getElementById('form_1').reset();"> </form>. </body> </html> 

    On peut constater que IE 11 va se bloquer après avoir réinitialisé le formulaire.

    essayer

      $(':input',"#" + form.id) .not(':button, :submit, :reset, :hidden') .val(''); 

    ou

     $("#" + form.id)[0].reset(); 

    Cochez cette case de saisie du fichier d'effacement dans Internet Explorer

    La correction de ce bug a été incluse dans les mises à jour IE pour février 2014 publiées aujourd'hui sur Windows Update.

    Je pense que c'est un bug dans Internet Explorer 11. J'ai signalé un bug similaire sur Microsoft Connect. J'ai pu reproduire les problèmes que j'ai rencontrés avec et sans jQuery.

    Sur le rapport de bogue, il existe une solution de contournement très simple (et assez surprenante) (découverte par philbee21). Avant d'attribuer la chaîne vide, définissez d'abord la valeur dans un seul espace:

     fields.forEach(function (field) { field.value = ' '; field.value = clearValue; }); 

    J'ai créé un violon mis à jour .

    Cela semble résoudre le problème:

     $(document).ready(function(){ $('#clearFormNormal').click(function(){ $("form input").val($("form input").val()); $("form input").val(""); }); }); 

    Je ne sais pas pourquoi, mais ma théorie est que le fait de définir la valeur du champ à sa valeur actuelle réinitialise une référence nulle.

    Consultez le JS Fiddle ici: http://jsfiddle.net/Cy5D5/22/

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.