English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Fokus-Element
Welche Elemente können standardmäßig fokussiert werden? Standardmäßig können nur formularelemente fokussiert werden. Weil nur formularelemente interagieren können
<input type="text" value="223">
Es gibt auch Möglichkeiten, nicht-formularelemente zu fokussieren, indem zunächst das tabIndex-Attribut auf-1，dann rufe den Methodenaufruf focus() auf
<div id="test" style="height:30px;width:100px; background:lightgreen">div</div>
<button id="btn">div-Element erhält den Fokus</button>
<script>
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
</script>
activeElement
Das document.activeElement-Attribut wird verwendet, um den DOM-Fokus zu verwalten und speichert den aktuellen Element, das den Fokus hat
[Hinweis] Dieses Attribut wird im IE-Browser nicht unterstützt
<div id="test" style="height:30px;width:100px; background:lightgreen">div</div>
<button id="btn">div-Element erhält den Fokus</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
console.log(document.activeElement);//<button>
test.tabIndex = -1;
test.focus();
console.log(document.activeElement);//<div>
}
</script>
den Fokus erhält
Möglichkeiten, wie ein Element den Fokus erhält4Arten, einschließlich Seitenladung, Benutzer-Eingabe (Tab-Taste drücken), focus()-Methode und autofocus-Attribut
【1】Seitenladung
Standardmäßig enthält document.activeElement den Verweis auf das body-Element, wenn die Dokumentladung abgeschlossen ist. Während der Dokumentladung ist der Wert von document.activeElement null
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】Benutzer-Eingabe (Tab-Taste drücken)
Der Benutzer kann in der Regel die Tab-Taste verwenden, um den Fokus zu bewegen, und die Leertaste, um den Fokus zu aktivieren. Zum Beispiel, wenn der Fokus auf einem Link liegt, dann wird durch Drücken der Leertaste auf den Link gesprungen
Wenn von der Tab-Taste die Rede ist, kann man den tabindex-Attribute nicht auslassen. Das tabindex-Attribute wird verwendet, um zu bestimmen, ob ein aktueller HTML-Elementknoten durch die Tab-Taste durchsucht wird und welche Priorität er hat
1、wenn tabIndex=-1，wird das aktuelle Element vom Tab-Taste übersprungen
2、wenn tabIndex = 0, bedeutet dies, dass der Tab-Taste das aktuelle Element durchsucht. Wenn ein Element keinen tabIndex hat, ist der Standardwert 0
3、wenn tabIndex größer als 0 ist, bedeutet dies, dass der Tab-Taste der Vorrang gegeben wird. Je größer der Wert, desto geringer die Priorität
In den folgenden Codezeilen ist die Reihenfolge, in der die Tastaturtaste Tab die Buttons fokussiert,2、5、1、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</button>
</div>
<script>
box.onkeyup = function(){
document.activeElement.style.background = 'pink';
}
</script>
【3】focus();
verwendet, um den Fokus des Browsers auf das Formularfeld zu setzen, d.h. das Formularfeld zu aktivieren, damit es auf Tastaturereignisse reagieren kann
[Hinweis] Wie bereits vorgestellt, wird der tabIndex, wenn es sich nicht um ein Formularelement handelt, auf-1，auch Fokus erlangen können
<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">span-Element erhält den Fokus</button>
<button id="btn2">input-Element erhält den Fokus</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5Ein neues Attribut autofocus wurde für Formularfelder hinzugefügt, indem dieses Attribut gesetzt wird, kann der Fokus automatisch auf das entsprechende Feld verschoben werden, ohne JavaScript zu verwenden
[Hinweis] Dieses Attribut kann nur für Formularelemente verwendet werden, und normale Elemente, selbst wenn tabIndex="" gesetzt wird-1″ist ebenfalls nicht wirksam
<input autofocus value="abc">
hasFocus()
Die document.hasFocus()-Methode gibt einen Boolean-Wert zurück, der angibt, ob im aktuellen Dokument ein Element aktiviert oder den Fokus erhalten hat. Durch das Überprüfen, ob das Dokument den Fokus erhalten hat, können Sie erkennen, ob Sie mit der Seite interagieren
console.log(document.hasFocus());//true
//Klicken Sie innerhalb von zwei Sekunden auf andere Tabs, um den Fokus von der aktuellen Seite zu entfernen
setTimeout(function(){
console.log(document.hasFocus());//false
},2000);
Fokus verlieren
Wenn Sie mit JavaScript ein Element den Fokus verlieren lassen möchten, müssen Sie die blur()-Methode verwenden
Die blur()-Methode entfernt den Fokus von einem Element. Beim Aufruf der blur()-Methode wird der Fokus nicht auf ein bestimmtes Element gesetzt; es wird nur der Fokus vom Element entfernt, auf dem die Methode aufgerufen wird
<input id="test" type="text" value="123">
<button id="btn1">input-Element erhält den Fokus</button>
<button id="btn2">input-Element verliert den Fokus</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
Fokusereignisse
Fokusereignisse werden ausgelöst, wenn eine Seite den Fokus erhält oder verliert. Durch die Kombination dieser Ereignisse mit dem document.hasFocus()-Methoden und der document.activeElement-Attribut können Sie die Bewegung des Benutzers auf der Seite verfolgen
Die Fokusereignisse umfassen folgende4个
1、blur
Das blur-Ereignis wird ausgelöst, wenn ein Element den Fokus verliert. Dieses Ereignis bubblt nicht auf
2、focus
Das focus-Ereignis wird ausgelöst, wenn ein Element den Fokus erhält. Dieses Ereignis bubblt nicht auf
3、focusin
Der focusin-Ereignis wird ausgelöst, wenn ein Element den Fokus erhält. Dieses Ereignis ist äquivalent zum focus-Ereignis, aber es bubblt auf
4、focusout
focusout-Ereignis wird ausgelöst, wenn das Element den Fokus verliert. Dieses Ereignis ist äquivalent zum blur-Ereignis, aber es bubbelt
[Hinweis] Für focusin- und focusout-Ereignisse unterstützt der IE-Browser DOM0-Ereignisbehandlung, während andere Browser nur DOM2Ebenen-Ereignisbehandlung
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
<div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">Inhalt ist123der div-Element erhält den Fokus</button>
<button id="btn2">Inhalt ist123der div-Element verliert den Fokus</button>
<button id="reset">Wiederherstellen</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)
}else{
boxIn.onfocusin = handler;
}
function handler(){
this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
box.addEventListener('focusin',handler)
}else{
box.onfocusin = handler;
}
//blur-Ereignis
function fnBlur(){
this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>
Wie das Laufzeitergebnis zeigt, kann das focusin-Ereignis bubbeln; während das blur-Ereignis nicht bubbeln kann
Fokusereignisse werden häufig für die Anzeige und Validierung von Formularen verwendet
Zum Beispiel, ändern Sie die Hintergrundfarbe beim Erhalten des Fokus; beim Verlieren des Fokus, die Hintergrundfarbe wiederherstellen und überprüfen
<div id="box">
<input id="input}}1" type="text" placeholder="nur Ziffern eingeben">
<input id="input}}2" type="text" placeholder="Nur chinesische Zeichen können eingegeben werden">
<span id="tips"></span>
</div>
<script>
if(box.addEventListener){
box.addEventListener('focusin',fnIn);
box.addEventListener('focusout',fnOut);
}else{
box.onfocusin = fnIn;
box.onfocusout = fnOut;
}
function fnIn(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'initial';
//Wenn es sich um ein Textfeld zur Überprüfung von Ziffern handelt
if(target === input1{
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Nur Ziffern können eingegeben werden, bitte neu eingeben'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
//Wenn es sich um ein Textfeld zur Überprüfung chinesischer Zeichen handelt
if(target === input2{
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Nur chinesische Zeichen können eingegeben werden, bitte neu eingeben'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
}
</script>
Zusammenfassung
Dies ist eine Zusammenfassung aller Inhalte der Fokusverwaltung in Javascript, dieser Artikel ist sehr detailliert und hat für das Lernen und Arbeiten eine gewisse Referenzwertigkeit. Wenn Sie Fragen haben, können Sie Kommentare hinterlassen.