Fokuselemente
Welche Elemente können Fokus gewinnen? Standardmäßig können nur Formelemente in den Fokus führen. Weil nur Formelemente interagieren können
<Eingabe type = "text" value = "223">
Es gibt auch eine Möglichkeit, den Fokus von Nicht-Form-Elementen zu stecken. Setzen Sie zuerst tabIndex -Attribut auf -1 und rufen Sie dann focus() -Methode auf.
<div id = "testen" style = "height: 30px; width: 100px; Hintergrund: LightGreen"> div </div> <button id = "btn"> Div -Element erhält Focus </button> <skript> btn.onclick = function () {test.tabIndex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'pink';} </script>Wirksamkeit
document.activeElement -Eigenschaft wird verwendet, um den DOM -Fokus zu verwalten, und speichert die Elemente, die derzeit den Fokus erhalten.
[Hinweis] Diese Eigenschaft wird nicht vom IE -Browser unterstützt
<div id = "test" style = "height: 30px; width: 100px; Hintergrund: LightGreen"> div </div> <button id = "btn"> Div -Element erhält Focus </button> <Script> cross.log (document.activeLement); // <body> btn.onclick = function () {console.log). test.focus (); console.log (document.activeLeement); // <div>} </script>Fokus bekommen
autofocus gibt 4 Möglichkeiten für Elemente, um focus() Fokus zu erhalten, einschließlich Seitenbelastung, Benutzereingabe (drücken
【1】 Seite Laden
Wenn das Dokument gerade geladen ist, wird der Verweis auf das Körperelement standardmäßig im document.activeElement gespeichert. ActiveLeement. Während des Ladens des Dokuments ist der Wert des document.activeElement . ActiveLeement ist null
<Script> console.log (document.activeLement); // null </script> <body> <cript> console.log (document.activeLeement); // <body> </script> </body>
【2】 Benutzereingabe (drücken Sie die Registerkarten -Taste)
Benutzer können in der Regel den Registerkartenschlüssel verwenden, um den Fokus zu verschieben und die Speicherleiste zu verwenden, um den Fokus zu aktivieren. Wenn sich der Fokus beispielsweise auf einem Link befindet, drücken Sie zu diesem Zeitpunkt die Space -Leiste und erspringt zum Link
Wenn es um die Registerkartenschlüssel geht, dürfen wir tabindex -Attribut nicht erwähnen. tabindex -Attribut wird verwendet, um festzustellen, ob der aktuelle HTML -Elementknoten durch die Registerkarte Taste und die Priorität des Traversals durchquert wird
1. Wenn tabindex=-1 , überspringt die Registerkartenschlüssel das aktuelle Element
2. Wenn tabindex=0 , bedeutet dies, dass die Registerkarte Taste das aktuelle Element durchquert. Wenn ein Element tabindex nicht festgelegt hat, beträgt der Standardwert 0
3. Wenn tabindex größer als 0 ist, bedeutet dies, dass die Registerkartenschlüssel zuerst durchquert wird. Je größer der Wert ist, desto kleiner die Priorität
Im folgenden Code beträgt bei Verwendung der Registerkarte Taste die Reihenfolge, in der die Schaltfläche Fokus erhält, 2, 5, 1 und 3
<div id = "box"> <button tabIndex = "3"> 1 </button> <button tabIndex = "1"> 2 </button> <button tabindex = "0"> 3 </button> <button tabindex = "-1"> 4 </button> <button Tabindex = "2"> 5 </buttylylyling.bound. 'pink';} </script>
【3】 Focus ()
focus() -Methode wird verwendet, um den Fokus des Browsers auf das Formularfeld zu setzen, d. H. Aktivieren Sie das Formularfeld, damit er auf Tastaturereignisse reagieren kann.
[Anmerkung] Wie bereits erwähnt, können Sie auch den Fokus erhalten, wenn es kein Formularelement ist, auf tabIndex auf -1 festgelegt wird
<span id = "test1" style = "Höhe: 30px; width: 100px;"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> Span -Element erhält Fokus </button> <button id = "btn2"> Eingabelement Gilt Focus> <Script> btn1.onclick = "onclick = "Buttn1.onclick =" Buttn1.onclick = " function () {test1.tabIndex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </script>【4】 Autofokus
In das Feld HTML5 -Formular wurde eine autofocus hinzugefügt. Solange diese Eigenschaft festgelegt ist, kann der Fokus automatisch ohne JavaScript in das entsprechende Feld verschoben werden.
[Hinweis] Dieses Attribut kann nur für Formularelemente verwendet werden. Auch wenn das normale Element auf tabIndex=”-1″ eingestellt ist, wird es nicht wirksam.
<Eingabe autofocus value = "abc">
Hasfocus ()
document.hasFocus() gibt einen booleschen Wert zurück, der angibt, ob Elemente im aktuellen Dokument aktiviert oder im Fokus gewonnen werden. Durch die Überprüfung, ob das Dokument den Schwerpunkt erreicht hat, können Sie wissen, ob es mit der Seite interagiert.
console.log (document.hasfocus ()); // true // klicken Sie innerhalb von zwei Sekunden auf andere Registerkarten, um den Fokus zu ermöglichen, die aktuelle Seite setTimeout (function () {console.log (document.hasfocus ()); // false}, 2000);Fokus verlieren
Wenn Sie JavaScript verwenden, um den Fokus zu verlieren, müssen Sie blur() -Methode verwenden
Die Funktion der blur() -Methode besteht darin, den Fokus aus dem Element zu entfernen. Wenn Sie blur() -Methode aufrufen, wird der Fokus nicht auf ein bestimmtes Element übertragen. Es soll nur den Fokus aus dem Element entfernen, das die Methode aufruft
<input id = "testen" type = "text" value = "123"> <button id = "btn1"> Eingabeelement Gewinne Fokus </button> <button id = "btn2"> Eingabeelement verliert Focus </button> <Script> btn1.onclick = function () {test.focus ();} btn2.onclick = function () {{) {) {);Fokusereignisse
Das Fokusereignis wird ausgelöst, wenn die Seite den Fokus gewinnt oder verliert. Mit diesen Ereignissen und der Zusammenarbeit mit document.hasFocus() -Methode und document.activeElement -Eigenschaft können Sie den Aufenthaltsort des Benutzers auf der Seite kennen.
Die Fokusereignisse umfassen die folgenden 4
1. Blur
Das blur -Ereignis wird abgefeuert, wenn das Element den Fokus verliert. Dieses Ereignis wird nicht sprudeln
2. Fokus
focus wird abgefeuert, wenn das Element den Fokus erhält. Dieses Ereignis wird nicht sprudeln
3. Fokusin
focusin -Ereignis wird abgefeuert, wenn das Element den Fokus erhält. Dieses Ereignis entspricht focus , aber es sprudelt
4. Fokusout
focusour -Ereignis wird abgefeuert, wenn das Element den Fokus verliert. Dieses Ereignis entspricht dem Blur -Ereignis, aber es sprudelt
[Hinweis] In Bezug auf Fokus- und Fokusout -Ereignisse, mit Ausnahme des IE -Browsers, der DOM0 -Ereignis -Handler unterstützt
<div id = "box" style = "display: inline-block; padding: 25px; Hintergrundfarbe: LightGreen;"> <div id = "Boxin" style = "Höhe: 50px; Breite: 50px; Hintergrundfarbe: Pink;"> 123 </div> </div> <button id = "btn1"> div1 ". Fokus </button> <button id = "reset"> restore </button> <script> reset.onclick = function () {history.go ();} // Focus () Methode btn1.onclick = function () {boxin.tabindex = -1; Boxin.focus ();} // BluR () Methode btn2.onclick = function () {Boxin.blur ();} // Focusin Ereignis if (Boxin.AdDEventListener) {boxin.addeventListener ('Focusin', Handler) {This.on.onfocusin = Handler; = 'LightBlue';} if (box.adDeDeVentListener) {Box.AdDeVentListener ('Focusin', Handler)} else {box.onfocusin = Handler;} // Blur Ereignisfunktion fnblur () {this.style.backgroundcolor = 'orange';} boxin.onblur = fnblur; fnblur; </script> Aus den laufenden Ergebnissen können wir erkennen, dass focusin -Ereignis sprudeln kann. Während das blur nicht sprudeln kann.
Fokusereignisse werden häufig zur Formularanzeige und -überprüfung verwendet
Wenn Sie beispielsweise den Fokus erhalten, ändern Sie die Hintergrundfarbe. Wenn Sie den Fokus verlieren, stellen Sie die Hintergrundfarbe wieder her und überprüfen Sie sie.
<div id = "box"> <input id = "input1" type = "text" placeholder = "Nur Zahlen eingeben"> <input2 "input2" Typ = "text" placeholder = "Nur chinesische Zeichen eingeben"> <span id = "tips"> </span> </div> <Script> if (BoxeneDeVentListener) {BoxeneDeDeVentListener). Box.AdDeVentListener ('Focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} Funktion fnin (e) {e = e || Ereignis; var target = e.target || e.srcelement; target.Style.backgroundColor = 'LightGreen';} Funktion fnout (e) {e = e || Ereignis; var target = e.target || e.srcelement; target.Style.backgroundColor = 'initial'; // Wenn es sich um ein Textfeld handelt, das die Nummer überprüft, wenn (Ziel === input1) {if (!/^/D*$/. Test (target.trim ())) {target.focus (); tips.innerhtml = 'Nur Zahlen eingeben, bitte treten Sie' setTimeout (function () {tips.innerhtml = ''}, 500) ein; }} // Wenn es sich um ein Textfeld handelt, das chinesische Zeichen überprüft, wenn (target === input2) {if (!/^[/U4e00-/u9fa5]*$/. Test (target.Value.trim ())) {target.focus (); tips.innerhtml = 'Nur chinesische Zeichen eingeben, bitte betreten Sie "setTimeout (function () {tips.innerhtml =' '}, 500); }}}} </script>Zusammenfassen
Das obige ist, alle Inhalte des Fokusmanagements in JavaScript für Sie zusammenzufassen. Dieser Artikel wird ausführlich eingeführt und hat einen gewissen Referenzwert für Ihr Studium und Ihre Arbeit. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.