Evento onblur
Exemplo
Execute um JavaScript quando um usuário deixa um campo de entrada:
<input type="text" onblur="myFunction()">
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O evento onblur ocorre quando um objeto perde o foco.
O evento onblur é mais frequentemente usado com código de validação de formulário (por exemplo, quando o usuário deixa um campo de formulário).
Dica: O evento onblur é o oposto do evento onfocus .
Dica: O evento onblur é semelhante ao evento onfocusout . A principal diferença é que o evento onblur não faz bolhas. Portanto, se você deseja descobrir se um elemento ou seu filho perde o foco, você pode usar o evento onfocusout. No entanto, você pode conseguir isso usando o parâmetro opcional useCapture do método addEventListener() para o evento onblur.
Suporte ao navegador
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Sintaxe
Em HTML:
<element onblur="myScript">
Em JavaScript:
object.onblur = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("blur", myScript);
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | Não |
---|---|
Cancelável: | 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> |
Versão DOM: | Eventos de Nível 2 |
Mais exemplos
Exemplo
Usando "onblur" junto com o evento "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Exemplo
Delegação de eventos: definindo o parâmetro useCapture de 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>
Exemplo
Delegação de eventos: usando 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>