Esempio
Esegui un JavaScript quando un campo di input sta per cominciare messa a fuoco:
<input type="text"
onfocusin="myFunction()"> Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
L'evento onfocusin si verifica quando un elemento sta per cominciare messa a fuoco.
Suggerimento: L'evento onfocusin è simile al onfocus evento. La differenza principale è che l'evento onfocus non lo fa bolla. Pertanto, se si vuole scoprire se un elemento o il suo bambino riceve l'attenzione, è necessario utilizzare l'evento onfocusin.
Suggerimento: Anche se Firefox non supporta l'evento onfocusin, è possibile scoprire se un figlio di un elemento ottiene la messa a fuoco o no, utilizzando un ascoltatore di cattura per l'onfocus evento (utilizzando il parametro useCapture facoltativa della addEventListener() metodo).
Tip: L'evento onfocusin è l'opposto del onfocusout dell'evento.
Supporto browser
| Evento | |||||
|---|---|---|---|---|---|
| onfocusin | sì | sì | Non supportato | sì | sì |
Nota: L'evento onfocusin potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+ utilizzando la sintassi JavaScript HTML DOM. Tuttavia, dovrebbe funzionare come attributo HTML e utilizzando addEventListener() metodo.
Sintassi
In HTML:
In JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusin=function(){ Prova tu stesso " In JavaScript, utilizzando il addEventListener() Metodo:
object .addEventListener("focusin", myScript );
Prova tu stesso " Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | sì |
|---|---|
| cancelable: | No |
| Tipo di evento: | FocusEvent |
| tag HTML supportati: | Tutti gli elementi HTML, ad eccezione di: <base>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title> |
| DOM Versione: | Livello 2 Eventi |
Altri esempi
Esempio
Utilizzando "onfocusin" insieme al "onfocusout" evento:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Prova tu stesso " Esempio
Delegazione evento: impostando il parametro useCapture di addEventListener() su true (for focus and blur) :
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true );
x.addEventListener("blur", myBlurFunction, true );
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Prova tu stesso " Esempio
delegazione evento: utilizzando l'evento focusIn (non supportato da Firefox):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function
myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Prova tu stesso " <Oggetto evento