O evento onfocus

Eventos DOM FocusEvent

Definição e uso

O evento onfocus ocorre quando um elemento obtém foco.

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

Dica: O evento onfocus é usado com Evento onblurao contrário.

Dica: O evento onfocus é semelhante a Evento onfocusin. A principal diferença é que o evento onfocus não borbulha. Portanto, se você quiser determinar se um elemento ou um de seus filhos obteve foco, você pode usar o evento onfocusin. Mas, você pode usar o evento onfocus para Método addEventListener()do useCapture Para fazer isso, use os parâmetros.

Exemplo

Exemplo 1

Executar JavaScript ao campo de entrada obter foco:

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

Experimente você mesmo

Na parte inferior da página há mais exemplos TIY.

Sintaxe

No HTML:

<element onfocus="myScript">

Experimente você mesmo

No JavaScript:

object.onfocus = function(){myScript};

Experimente você mesmo

No JavaScript, use o método addEventListener():

object.addEventListener("focus", myScript);

Experimente você mesmo

Notas:O Internet Explorer 8 ou versões anteriores não suportam Método addEventListener()。

Detalhes técnicos

Bubbling: Não suportado
Cancelável: Não suportado
Tipo de evento: FocusEvent
Tags HTML suportadas: Todos os elementos HTML, exceto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
Versão do DOM: Eventos de Nível 2

Suporte do navegador

Eventos Chrome IE Firefox Safari Opera
onfocus Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo 2

Uso conjunto do evento onfocus e onblur:

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

Experimente você mesmo

Exemplo 3

Limpar o campo de entrada focado:

<!-- Substitua o valor atual do campo de entrada ao obter o foco por uma string vazia -->
<input type="text" onfocus="this.value=''" value="Blabla">

Experimente você mesmo

Exemplo 4

Delegação de eventos: configure o parâmetro useCapture da função 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>

Experimente você mesmo

Exemplo 5

Delegação de eventos: uso do 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>

Experimente você mesmo

Eventos DOM FocusEvent