Heim > Web-Frontend > CSS-Tutorial > Wie kann man Eingabeelemente in verschiedenen Browsern zuverlässig in den Fokus rücken?

Wie kann man Eingabeelemente in verschiedenen Browsern zuverlässig in den Fokus rücken?

DDD
Freigeben: 2024-11-01 07:00:30
Original
315 Leute haben es durchsucht

How to Reliably Set Focus on Input Elements in Different Browsers?

IE- und Focus-Ereignisprobleme

Das focus()-Ereignis kann in Internet Explorer unzuverlässig sein. Beim Versuch, den Cursor-Fokus mit der folgenden Funktion auf ein Eingabeelement zu setzen:

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

IE7 reagiert nicht auf den Aufruf von focus() und lässt den Cursor außerhalb des Eingabeelements. Um dieses Problem im IE zu beheben, verwenden Sie eine setTimeout-Funktion:

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
Nach dem Login kopieren

Opera Woes

Die Verwendung dieser Lösung führt jedoch zu einem neuen Dilemma in Opera. Um dieses Problem zu beheben, konsultieren Sie Ressourcen wie „So legen Sie den Fokus im erforderlichen Index auf das Textfeld für Opera fest.“

Universelle Lösung

Um die Kompatibilität mit allen Browsern sicherzustellen, integrieren Sie ein Code-Snippet, das das Szenario behandelt, in dem das Eingabeelement nicht sofort verfügbar ist:

setTimeout(

  function( ) {

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

  }

, 10 ) ;
Nach dem Login kopieren

Dieses Snippet versucht alle 10 Millisekunden erneut, den Fokus zu fokussieren bis das Element verfügbar wird, wodurch das Problem sowohl für langsam ladende Seiten als auch für die verzögerte Elementverfügbarkeit behoben wird.

Das obige ist der detaillierte Inhalt vonWie kann man Eingabeelemente in verschiedenen Browsern zuverlässig in den Fokus rücken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage