evento em foco
Exemplo
Execute um JavaScript quando um campo de entrada estiver prestes a receber o foco:
<input type="text"
onfocusin="myFunction()">
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O evento onfocusin ocorre quando um elemento está prestes a obter foco.
Dica: O evento onfocusin é semelhante ao evento onfocus . A principal diferença é que o evento onfocus não faz bolhas. Portanto, se você deseja descobrir se um elemento ou seu filho recebe o foco, você deve usar o evento onfocusin.
Dica: O evento onfocusin é o oposto do evento onfocusout .
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao evento.
| Event | |||||
|---|---|---|---|---|---|
| onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Observação: o evento onfocusin 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 o método addEventListener() (veja exemplos de sintaxe abaixo).
Sintaxe
Em HTML:
<element onfocusin="myScript">
Em JavaScript (pode não funcionar como esperado no Chrome, Safari e Opera 15+):
object.onfocusin = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("focusin", myScript);
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
| Bolhas: | sim |
|---|---|
| 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 "onfocusin" junto com o evento "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Exemplo
Delegação de eventos: definindo o parâmetro useCapture de addEventListener() como true (para foco e desfoque):
<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:
<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>