2016-06-01 10 views
1

Ich habe das vorher nie bemerkt, aber es scheint, dass es nicht möglich ist, ein Eingabefeld auf load zu fokussieren, wenn ein Hash auf ein existierendes Element gesetzt ist.Konnte Eingabe nicht fokussieren, wenn der Hash gesetzt ist

Warum ist das?

Schauen Sie sich das sehr einfaches Beispiel:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf8"> 
     <title>Focus test</title> 
    </head> 
    <body> 
     <div id="bar"> 
      <input name="foo"> 
     </div> 
     <script> 
      console.log(document.activeElement); 
      document.getElementsByTagName('input')[0].focus(); 
      console.log(document.activeElement); 
     </script> 
    </body> 
</html> 

Wenn Sie die Eingabe, die Seite in Chrome laden wird fokussiert werden. Wenn Sie den Hash auf #bar setzen und die Seite neu laden, wird die Eingabe nicht fokussiert. Wenn Sie den Hash auf # nicht existierendes Element setzen, wird die Eingabe erneut fokussiert.

activeElement sagt body und später input unabhängig davon, ob ein Hash festgelegt ist oder nicht seltsam genug.

+0

Was ist die Frage? Was ist das erwartete Verhalten? – Rayon

+0

Warum ist es nicht möglich, ein Eingabefeld zu fokussieren, wenn ein Hash festgelegt ist, ist die Frage. Das erwartete Verhalten besteht darin, dass die Eingabe den Fokus erhält. – powerbuoy

+0

Wie würde der Browser bestimmen, was er bevorzugen soll? Was ist mit "Hash" in der URL? Ich kann keinen überzeugenden Hinweis liefern, aber so sollte es sich verhalten. Die Einstellung 'focus' nach' setTimeout' hilft! – Rayon

Antwort

1

Es gibt 4 Szenarien unter Berücksichtigung diesen Anwendungsfall:

  1. Seite ist loaded/refreshed, wenn es keine Hash in der URL ist

In diesem Fall Element.focus() funktioniert gut .

  1. Hash in der URL ist appended aber Seite ist nicht reloaded/refreshed

In diesem Fall HashChangeEvent könnte die focus gesetzt werden über Element.

  1. Seite loaded/refreshed ist, wenn es ist Hash in der URL

In diesem Fall Element.focus() funktioniert wenn aufgerufen in der callback von setTimeout. Sogar ein setTimeout(callback,0) wird funktionieren!

  1. Seite ist loaded/refreshed wenn es ist Hash in der URL, aber target existiert nicht in der Seite

In diesem Fall , Element.focus() funktioniert gut

Abschließender Gedanke:

Um ein focus je Element in haben kein Szenario verwendet setTimeout im window.onload Rückruf mit dem delay von

window.onload = function() { 
    setTimeout(function() { 
    document.getElementsByTagName('input')[0].focus(); 
    console.log(document.activeElement); 
    }, 0); 
}; 
Verwandte Themen