Recomendação de curso:
Evento onfocusout
Definição e uso
Embora o Firefox não suporte o evento onfocusout, você pode entender se um elemento filho perdeu o foco usando o ouvinte de captura do evento onblur (usando o parâmetro opcional useCapture do método addEventListener()). Ocorre o evento onfocusout quando um elemento está prestes a perder o foco. Evento onblurO evento onfocusout é semelhante a:
Embora o Firefox não suporte o evento onfocusout, você pode entender se um elemento filho perdeu o foco usando o ouvinte de captura do evento onblur (usando o parâmetro opcional useCapture do método addEventListener()).. A principal diferença é que o evento onblur não bubla. Portanto, se você quiser descobrir se um elemento ou um de seus filhos perdeu o foco, você deve usar o evento onfocusout.
Embora o Firefox não suporte o evento onfocusout, você pode entender se um elemento filho perdeu o foco usando o ouvinte de captura do evento onblur (usando o parâmetro opcional useCapture do método addEventListener()). Dica: Evento onfocusinO evento onfocusout é semelhante a:
Contrário.
Exemplo
Exemplo 1
Executar JavaScript quando o campo de entrada estiver prestes a perder o foco:
<input type="text" onfocusout="myFunction()">
Mais exemplos TIY no rodapé da página.
Sintaxe
No HTML:< element.addEventListener("focusout",onfocusout="
">
No JavaScript, use o método addEventListener():Em JavaScript (pode não funcionar conforme esperado no Chrome, Safari e Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
No JavaScript, use o método addEventListener():object .addEventListener("focusout",myScript
Nota:); Internet Explorer 8 ou versões anteriores não suportamMétodo addEventListener()
.
| Detalhes técnicos: | Suporte |
|---|---|
| Bubbling: | Cancelável: |
| Não suportado: | 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
Os números na tabela indicam a primeira versão do navegador que suporta completamente o evento.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Suporte | Suporte | 52.0 | Suporte | Suporte |
Nota:O evento onfocusout pode não funcionar conforme o esperado no Chrome, Safari e Opera 15+. No entanto, ele deve ser usado como atributo HTML e com o método addEventListener() (veja os exemplos de sintaxe abaixo).
Mais exemplos
Exemplo 2
Use os eventos "onfocusin" e "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Exemplo 3
Delegação de eventos: configure o parâmetro useCapture da addEventListener() para true (usado para focus e 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>
Exemplo 4
Delegação de eventos: usando o evento focusin:
<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>
