tutoriais mais recente desenvolvimento web
 

onfocus Evento

<Objeto de evento

Exemplo

Executar um JavaScript quando um campo de entrada recebe foco:

<input type="text" onfocus="myFunction()">
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O evento onfocus ocorre quando um elemento recebe foco.

O evento onfocus é mais frequentemente usado com <input>, <select>, e <a> .

Tip: O evento onfocus é o oposto do onblur evento.

Dica: O evento onfocus é semelhante ao onfocusin evento. A principal diferença é que o evento onfocus não faz bolha. Portanto, se você quiser saber se um elemento ou seu filho recebe o foco, você pode usar o evento onfocusin. No entanto, você pode conseguir isso usando o parâmetro useCapture opcional do addEventListener() método para o evento onfocus.

Suporte navegador

Evento
onfocus sim sim sim sim sim

Sintaxe

Em HTML:

< Tente você mesmo "

Em JavaScript:

object .onfocus=function(){ Tente você mesmo "

Em JavaScript, usando o addEventListener() Método:

object .addEventListener("focus", myScript );
Tente você mesmo "

Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.

Detalhes técnicos

Bolhas: Não
cancelable: Não
Tipo de evento: FocusEvent
tags HTML suportadas: Todos os elementos HTML, EXCETO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
DOM Versão: Nível 2 Eventos
Exemplos

mais Exemplos

Exemplo

Usando "onfocus" juntamente com o "onblur" evento:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Tente você mesmo "

Exemplo

Delegação de evento: a definição do parâmetro useCapture de addEventListener() para 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>
Tente você mesmo "

Exemplo

delegação de evento: usar o evento focusIn (não suportado pelo 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>
Tente você mesmo "
<Objeto de evento