Exemplo
Executar um JavaScript quando um campo de entrada está prestes a perder o foco:
<input type="text"
onfocusout="myFunction()">
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O evento onfocusout ocorre quando um elemento está prestes a perder o foco.
Dica: O evento onfocusout é semelhante ao onblur evento. A principal diferença é que o evento onblur não bolha. Portanto, se você quiser saber se um elemento ou sua criança perde o foco, você deve usar o evento onfocusout.
Dica: Embora Firefox não suporta o evento onfocusout, você pode descobrir se uma criança de um elemento perde o foco ou não, usando um ouvinte captura para o onblur evento (usando o parâmetro useCapture opcional do addEventListener() método).
Tip: O evento onfocusout é o oposto do onfocusin evento.
Suporte navegador
Evento | |||||
---|---|---|---|---|---|
onfocusout | sim | sim | Não suportado | sim | sim |
Nota: O evento onfocusout pode não funcionar como esperado no Chrome, Safari e Opera 15+ usando a sintaxe JavaScript HTML DOM. No entanto, ele deve funcionar como um atributo HTML e usando a addEventListener() método.
Sintaxe
Em HTML:
Em JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusout=function(){ Tente você mesmo "
Em JavaScript, usando o addEventListener() Método:
object .addEventListener("focusout", myScript );
Tente você mesmo " Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | sim |
---|---|
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 |
mais Exemplos
Exemplo
Usando "onfocusin" juntamente com o "onfocusout" evento:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Tente você mesmo " Exemplo
Delegação de evento: a definição do parâmetro useCapture de addEventListener() para true (for focus and blur) :
<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