O evento onblur

Eventos DOM FocusEvent

Definição e uso

O evento onblur ocorre quando um objeto perde o foco.

O evento onblur é frequentemente usado com código de validação de formulário (por exemplo, quando o usuário sai de um campo de formulário).

Dica: O evento onblur é semelhante a Evento onfocusao contrário.

Dica: O evento onblur é semelhante a Evento onfocusout.A principal diferença é que o evento onblur não se propaga. Portanto, se você quiser descobrir se um elemento ou seus elementos filhos perderam o foco, você pode usar o evento onfocusout. No entanto, você pode usar o evento onblur do Método addEventListener()o parâmetro useCapture (opcional) para isso.

Exemplo

Executar JavaScript quando o usuário sair do campo de entrada:

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

Experimente você mesmo

Mais exemplos TIY na parte inferior da página.

Sintaxe

No HTML:

<element onblur="myScript">

Experimente você mesmo

No JavaScript:

objeto.onblur = function(){}myScript};

Experimente você mesmo

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

objeto.addEventListener("blur", myScript);

Experimente você mesmo

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

Detalhes técnicos

Percussão: 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 DOM: Eventos Level 2

Suporte do navegador

Eventos Chrome IE Firefox Safari Opera
onblur Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo

Usar "onblur" e "onfocus" eventos juntos:

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

Experimente você mesmo

Exemplo

Delegação de eventos: definir o parâmetro useCapture da addEventListener() como 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

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

Experimente você mesmo

Eventos DOM FocusEvent