l'evento onfocus

Eventi DOM FocusEvent

Definizione e uso

L'evento onfocus si verifica quando un elemento ottiene il focus.

l'evento onfocus viene utilizzato più spesso con <input>, <select> e <a>.

Suggerimento: l'evento onfocus è usato insieme a Evento onblural contrario.

Suggerimento: l'evento onfocus è simile a Evento onfocusin. La principale differenza è che l'evento onfocus non si propaga. Pertanto, se si desidera determinare se un elemento o uno dei suoi figli ha ottenuto il focus, si può utilizzare l'evento onfocusin. Ma si può utilizzare l'evento onfocus per Metodo addEventListener()del useCapture parametro per farlo.

Esempio

Esempio 1

Esegui JavaScript quando il campo di input ottiene il focus:

<input type="text" onfocus="myFunction()">

Prova tu stesso

Più esempi TIY sono disponibili nella pagina inferiore.

Sintassi

In HTML:

<elemento onfocus="myScript">

Prova tu stesso

In JavaScript:

oggetto.onfocus = function(){myScript};

Prova tu stesso

In JavaScript, utilizzare il metodo addEventListener():

oggetto.addEventListener("focus", myScript);

Prova tu stesso

Nota:Internet Explorer 8 o versioni precedenti non lo supportano Metodo addEventListener()。

Dettagli tecnici

Bubbling: Non supportato
Cancellabile: Non supportato
Tipo di evento: FocusEvent
Tag HTML supportati: Tutti gli elementi HTML, eccetto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
Versione DOM: Level 2 Events

Supporto del browser

Evento Chrome IE Firefox Safari Opera
onfocus Supporta Supporta Supporta Supporta Supporta

Più esempi

Esempio 2

Utilizzo contemporaneo degli eventi onfocus e onblur:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Prova tu stesso

Esempio 3

Pulisci il campo di input con l'attenzione:

<!-- Sostituisci il valore corrente del campo di input quando il campo di input riceve l'attenzione con una stringa vuota -->
<input type="text" onfocus="this.value=''" value="Blabla">

Prova tu stesso

Esempio 4

Delegazione degli eventi: impostare il parametro useCapture di addEventListener() a true:

<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 5

Delegazione degli eventi: utilizzo dell'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

Eventi DOM FocusEvent