web-dev-qa-db-fra.com

IE 9 et IE 10 ne peut pas saisir de texte dans les zones de saisie de temps en temps)

Il y a une page Web avec un iframe à l'intérieur. Parfois, les contrôles de la zone de texte d'entrée, à l'intérieur de l'iframe, sont verrouillés/gelés. Les utilisateurs ne peuvent pas y saisir de texte. Mais la zone de texte peut être ciblée et non décolorée. Il n'y a pas de code pour désactiver les contrôles d'entrée et cela ne se produit pas toujours. Jusqu'à présent, cela se produit uniquement dans IE 9 et IE 10. Firefox et Chrome est OK.

Une brève description du fonctionnement de la page est:

  • Il y a un bouton sur la page parent. En cliquant dessus, vous construirez un iframe à partir de zéro et l'afficherez. Cela se fait par Javascript.

  • Encore une fois, il y a un bouton sur l'iframe pour le fermer. En cliquant dessus
    supprimera l'iframe du DOM de la page parent.

Veuillez me faire savoir si vous souhaitez plus d'informations si nécessaire. Merci d'avance.

javascripthtmlinternet-explorerinternet-explorer-9internet-explorer-10
26
Pyae Phyo Aung

Ce bug est très ennuyeux, pire encore, il y avait très peu d'informations que nous pouvions trouver sur Google.

Il n'y a qu'un seul lien de Microsoft qui concerne IE9, mais le problème existe toujours dans IE10/IE11 et beaucoup plus facile à reproduire.

Je viens de créer un violon pour décrire ce problème

http://jsfiddle.net/WilliamLeung/T3JP9/1/

Pourquoi est-il si difficile pour M $ de résoudre ce problème pendant des années?

il devrait y avoir trois solutions de contournement

  1. Réinitialiser le focus chaque fois que nous modifions le DOM avec iframe

  2. ou planifier une tâche "ne rien faire" qui peut prendre du temps, ce qui peut faire IE réponse à un événement de souris comme par magie, je ne pourrais pas vous dire pourquoi, peut-être M $ pourrait

    Les exemples de codes qui configurent une tâche longue

    setInterval(function () {
    var loopCount = 10000;
    var x = 0;
    for (var i = 0; i < loopCount; i++) {
        x = (x + Math.random() * 1000) >>> 0;
    }
    return x;
}, 1000);

  3. ou réinitialiser le contenu DOM avant de le supprimer du document

    someDivWithIframe.innerHTML = "";
$(someDivWithIframe).remove();

    Je ne sais pas si cela aide dans tous les cas, vous devriez avoir essayé

35
William Leung

La solution avec jQuery travaillé sur IE11 pour moi, pas les autres solutions.

$(theIframeElement).empty().remove();

Une autre solution fonctionnant sur IE9/10 consistait à définir le iframe src sur vide avant de le supprimer

iframe.src=""

Mais cela provoque une exception "Accès refusé" sur IE11 si vous utilisez une ancienne version de jQuery <1.11.1

Quelques liens: Pour plus d'informations, jQuery a également résolu ce problème pour son plugin Dialog.js qui affichait du contenu dans un iframe: http://bugs.jqueryui.com/ticket/9122

correction d'un bug jQuery sur IE11 "Accès refusé": http://bugs.jquery.com/ticket/14535

5
JcAspes

J'ai réussi à corriger ce bogue en redéfinissant le focus sur la page principale. Ce que j'ai fait jusqu'à présent, c'est: mettre une zone de texte d'entrée HTML, qui est définie invisible, dans la page principale. Lorsque l'iframe se ferme, je remets le focus sur cette zone de texte.

Veuillez consulter les liens suivants pour plus d'informations sur ce bogue IE.

link1

link2

4
Pyae Phyo Aung

Aucune des solutions n'a fonctionné pour moi dans IE 11.

Résolu en ajoutant ce code dans iframe:

$("input").first().focus().blur();

Évidemment, cela ne fonctionnera pas si vous ne contrôlez pas votre iframe.

3
Fyodor

Cela a fonctionné pour moi sur IE11,

  • Cause du problème (à part IE étant stupide):
    • L'élément d'entrée focalisé est supprimé de l'affichage à l'intérieur d'un iframe (propriété d'affichage CSS)
  • Problème:
    • L'élément de saisie de texte ne peut pas être cliqué, vous pouvez toujours le tabuler cependant
  • Solution de contournement:
    • Nous devons concentrer () un élément visible connu avant de retirer un champ de saisie de l'affichage, donc sur la ligne avant de retirer l'affichage d'un champ de saisie, nous avons la ligne: document.body.focus();
3
GM-Script-Writer-62850

Juste pour ajouter à ce que les autres ont dit, c'est en fait un problème lorsqu'une entrée dans un iframe a le focus qui est ensuite fermé, ce qui fait que toutes les autres entrées perdent le focus. Et en effet, avoir un script pour définir le focus sur un élément résout le problème. Mais pour moi, cela ne fonctionnait pas car certaines de mes entrées étaient désactivées. Donc, la solution qui a fonctionné pour moi est ci-dessous

$("input[type=text]:not([disabled])").first().focus();

Extrait complet lorsque j'utilisais bootstrap modal et le modal avait un iframe. J'ai défini le focus sur un champ modifiable avant d'ouvrir un modèle et après la fermeture:

var modalInstance = $uibModal.open({
    // modal properties
  });
modalInstance.closed.then(function () {
  $("input[type=text]:not([disabled])").first().focus();
});
modalInstance.opened.then(function () {
  $("input[type=text]:not([disabled])").first().focus();

});
2
Narain Mittal

J'ai initialement écrit le plugin ci-dessous pour corriger les fuites de mémoire dans IE 8, mais par conséquent, il résout également ce problème.

https://github.com/steelheaddigital/jquery.purgeFrame

1
portlandrock

Solution simple avec Javascript qui fonctionne pour moi et je n'ai vu aucun effet secondaire dans d'autres navigateurs:

<script>
  var pswElement = document.getElementById("password");
  pswElement.addEventListener("focus", myFocusFunction, true);

  function myFocusFunction() {    
    document.getElementById("password").select();
  }
</script>

Quoi qu'il en soit, c'est assez triste, MS n'est pas en mesure de résoudre ce problème dans la version supérieure.

1
squirrelInTheBarel

J'ai eu le même problème avec IE11, angularjs et en utilisant un IFrame. Mon modèle utilise ng-switch pour changer de mode d'affichage. L'un des modes d'affichage contient un IFrame. Au moment où je quitte le mode d'affichage contenant l'IFrame:

var iFrame = <HTMLIFrameElement>document.getElementById("myIFrame");
iFrame.focus();
this.mode = ViewModes.ModeWithoutIFrame;

Résolu le problème pour moi.

0
Frode

Je souffrais également de ce problème. Comme William Leung l'a souligné, IE a un bug avec remove Iframe Object du DOM.

Essayez ce qui suit:

$(someDivWithIframe).empty().remove();
0
Teddy Han

Voici la solution qui a fonctionné pour moi, après avoir essayé toutes les autres sur cette page! Nécessite jQuery mais je suis sûr qu'il pourrait être réécrit en JavaScript natif si cela est nécessaire.

Comme avec la plupart des autres solutions, cela devrait être ajouté au source de l'iframe, en supposant que vous avez accès pour le modifier:

$("body").focusout( function () { window.focus(); });

0
Waggers