English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Elemento di focus
Quali elementi possono ottenere il focus? Per impostazione predefinita, solo gli elementi di form possono ottenere il focus. Poiché solo gli elementi di form possono interagire
<input type="text" value="223">
È possibile far ottenere il focus agli elementi non di form, impostando prima l'attributo tabIndex a -1 e poi chiamando il metodo focus()
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">L'elemento div ottiene il focus</button>
<script>
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
</script>
activeElement
L'attributo document.activeElement viene utilizzato per gestire il focus del DOM, conservando l'elemento attualmente in focus
[Attenzione]Questa proprietà non è supportata dal browser IE
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">L'elemento div ottiene il focus</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>
Ottieni il focus
Ci sono 4 modi per ottenere il focus dell'elemento, tra cui il caricamento della pagina, l'inserimento utente (premendo il tasto Tab), il metodo focus() e l'attributo autofocus
【1】Caricamento della pagina
Per impostazione predefinita, quando il documento è stato caricato, l'oggetto document.activeElement contiene un riferimento all'elemento body. Durante il caricamento del documento, il valore di document.activeElement è null
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】Inserimento utente (premendo il tasto Tab)
Di solito, gli utenti possono utilizzare il tasto Tab per muovere il focus, e il tasto Spazio per attivare il focus. Ad esempio, se il focus è su un link, premendo il tasto Spazio si passerà al link
Parlando del tasto Tab, non si può non menzionare l'attributo tabindex. L'attributo tabindex viene utilizzato per specificare se l'elemento DOM corrente deve essere attraversato dal tasto Tab e la priorità di attraversamento
1、Se tabIndex è uguale a -1, il tasto tab salta l'elemento corrente
2、Se tabIndex è uguale a 0, significa che il tasto tab esegue la scansione dell'elemento corrente. Se un elemento non è impostato tabIndex, il valore predefinito è 0
3、Se tabIndex è maggiore di 0, significa che il tasto tab esegue la scansione prioritaria. Più grande è il valore, minore è la priorità
Nella seguente codice, quando si utilizza il tasto tab, l'ordine di acquisizione del focus dai pulsanti è 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()
Il metodo focus() viene utilizzato per impostare il focus del browser sul campo del modulo, ossia attivare il campo del modulo in modo che possa rispondere agli eventi della tastiera
[Attenzione] Come è stato introdotto in precedenza, se non è un elemento del modulo, impostare tabIndex a -1 può anche ottenere il focus
<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">L'elemento span riceve il focus</button>
<button id="btn2">L'elemento input riceve il focus</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5 ha aggiunto un nuovo attributo per il campo del modulo chiamato autofocus, impostando questa proprietà, senza JavaScript, è possibile spostare automaticamente il focus al campo corrispondente
[Attenzione] Questa proprietà può essere utilizzata solo per gli elementi del modulo, anche se viene impostato tabIndex="-1" sugli elementi normali non ha effetto
<input autofocus value="abc">
hasFocus()
Il metodo hasFocus() restituisce un valore booleano che indica se c'è un elemento attivato o che riceve il fuoco nel documento corrente. Attraverso il controllo del fuoco del documento, si può sapere se si interagisce con la pagina
console.log(document.hasFocus());//true
//Nei due secondi clicca su altre schede per far uscire il fuoco dalla pagina corrente
setTimeout(function(){
console.log(document.hasFocus());//false
},2000);
Perdere il fuoco
Se si utilizza JavaScript per far perdere l'elemento il fuoco, allora si deve utilizzare il metodo blur()
Il metodo blur() ha la funzione di rimuovere il fuoco dall'elemento. Quando si chiama il metodo blur(), non viene trasferito il fuoco a un elemento specifico; semplicemente, il fuoco viene rimosso dall'elemento che chiama questo metodo
<input id="test" type="text" value="123">
<button id="btn1">L'elemento input riceve il fuoco</button>
<button id="btn2">L'elemento input perde il fuoco</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
Eventi di fuoco
Gli eventi di fuoco vengono attivati quando la pagina riceve o perde il fuoco. Utilizzando questi eventi e combinandoli con il metodo document.hasFocus() e l'attributo document.activeElement, è possibile conoscere la posizione dell'utente nella pagina
Gli eventi di fuoco includono in totale i seguenti 4
1、blur
L'evento blur viene attivato quando un elemento perde il fuoco. Questo evento non è bollato
2、focus
L'evento focus viene attivato quando un elemento riceve il fuoco. Questo evento non è bollato
3、focusin
L'evento focusin viene attivato quando un elemento riceve il fuoco. Questo evento è equivalente all'evento focus, ma è bollato
4、focusout
L'evento focusout viene attivato quando un elemento perde il fuoco. Questo evento è equivalente all'evento blur, ma è bollato
[Attenzione] Riguardo agli eventi focusin e focusout, oltre a Internet Explorer che supporta i programmi di gestione degli eventi di livello DOM0, tutti gli altri browser supportano solo i programmi di gestione degli eventi di livello DOM2
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
<div id="boxIn" style="altezza: 50px;larghezza: 50px;color-fondo: rosa;">123</div>
</div>
<button id="btn1">L'elemento div con contenuto 123 ottiene l'interfaccia</button>
<button id="btn2">L'elemento div con contenuto 123 perde l'interfaccia</button>
<button id="reset">Ripristina</button>
<script>
reset.onclick = function(){history.go();}
//metodo focus()
btn1.onclick = function(){
boxIn.tabIndex= -1;
boxIn.focus();
}
//metodo blur()
btn2.onclick = function(){
boxIn.blur();
}
//evento focusin
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;
}
//evento blur
function fnBlur(){
this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>
Dai risultati della esecuzione è noto che l'evento focusin può essere bolliccioso; mentre l'evento blur non può essere bolliccioso
Gli eventi di fuoco sono spesso utilizzati per la presentazione e la verifica dei moduli
Ad esempio, quando si ottiene l'interfaccia, si modifica il colore di sfondo; quando si perde l'interfaccia, si ripristina il colore di sfondo e si verifica
<div id="box">
<input id="input1" type="text" placeholder="solamente possono essere inseriti numeri">
<input id="input2" type="text" placeholder="solamente possono essere inseriti caratteri cinesi">
<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';
//Se è un campo di testo per la verifica dei numeri
if(target === input1){
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Puoi solo inserire numeri, per favore reinserisci'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
//Se è un campo di testo per la verifica dei caratteri cinesi
if(target === input2){
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Puoi solo inserire caratteri cinesi, per favore reinserisci'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
}
</script>
Sommario
Questo è un riassunto di tutto il contenuto di gestione del fuoco in JavaScript per voi, questo articolo è spiegato in modo dettagliato e ha un valore di riferimento per lo studio e il lavoro di tutti. Se avete domande, potete lasciare un messaggio di discussione.