Comment définir de manière fiable le focus sur les éléments d'entrée dans différents navigateurs ?

Problèmes d'IE et d'événement Focus

L'événement focus() peut ne pas être fiable dans Internet Explorer. Lorsque vous tentez de définir le focus du curseur sur un élément d'entrée à l'aide de la fonction suivante :

function change() {
  var input = document.getElementById('pas');
  var input2 = input.cloneNode(false);
  input2.type = 'password';
  input.parentNode.replaceChild(input2, input);
  input2.focus();
}

IE7 ne répondra pas à l'appel focus(), laissant le curseur en dehors de l'élément d'entrée. Pour résoudre ce problème dans IE, utilisez une fonction setTimeout :

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

Opera Woes

Cependant, l'utilisation de cette solution introduit un nouveau problème dans Opera. Pour résoudre ce problème, consultez des ressources telles que « Comment définir le focus dans l'index requis sur la zone de texte pour Opera ».

Solution universelle

Pour garantir la compatibilité entre tous les navigateurs, intégrez un extrait de code qui gère le scénario dans lequel l'élément d'entrée n'est pas immédiatement disponible :

setTimeout(

  function( ) {

    var el = document.getElementById( "myInput" ) ;
    ( el != null ) ? el.focus( ) : setTimeout( arguments.callee , 10 ) ;

  }

, 10 ) ;

Cet extrait réessaye de se concentrer toutes les 10 millisecondes jusqu'à ce que l'élément devienne disponible, résolvant le problème à la fois pour les pages à chargement lent et pour l'élément retardé. disponibilité.

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!