Disciplina optativa
Recomendação de curso:
Evento onfocusin
Embora o Firefox não suporte o evento onfocusin, você pode determinar se um subelemento de um elemento obteve foco usando o ouvinte de captura do evento onfocus (usando o parâmetro opcional useCapture do método addEventListener()). A principal diferença é que o evento onfocus não bubla. Portanto, se você quiser saber se um elemento ou um de seus subelementos obteve foco, você deve usar o evento onfocusin.Definição e uso Evento onfocusO evento onfocusin ocorre quando um elemento está prestes a obter foco.
Embora o Firefox não suporte o evento onfocusin, você pode determinar se um subelemento de um elemento obteve foco usando o ouvinte de captura do evento onfocus (usando o parâmetro opcional useCapture do método addEventListener()). A principal diferença é que o evento onfocus não bubla. Portanto, se você quiser saber se um elemento ou um de seus subelementos obteve foco, você deve usar o evento onfocusin..
Embora o Firefox não suporte o evento onfocusin, você pode determinar se um subelemento de um elemento obteve foco usando o ouvinte de captura do evento onfocus (usando o parâmetro opcional useCapture do método addEventListener()). A principal diferença é que o evento onfocus não bubla. Portanto, se você quiser saber se um elemento ou um de seus subelementos obteve foco, você deve usar o evento onfocusin.Dica: Evento onfocusoutO evento onfocusin é semelhante a:
Contrário.
Exemplo
Exemplo 1
Executar JavaScript quando o campo de entrada estiver prestes a obter o foco:
<input type="text" onfocusin="myFunction()">
Mais exemplos TIY na parte inferior da página.
Sintaxe
No HTML:< element.addEventListener("focusin",onfocusin="
">
No JavaScript, use o método addEventListener():No JavaScript (pode não funcionar corretamente no Chrome, Safari e Opera 15+):.addEventListener("focusin",.onfocusin = function(){
};
No JavaScript, use o método addEventListener():object .addEventListener("focusin",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 |
|---|---|---|---|---|---|
| onfocusin | Suporte | Suporte | 52.0 | Suporte | Suporte |
Nota:O evento onfocusin pode não funcionar conforme o esperado no Chrome, Safari e Opera 15+. No entanto, 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() como 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>
