English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
焦点元素
到底哪些元素可以获得焦点呢？默认情况下，只有表单元素可以获得焦点。因为只有表单元素可以交互
<input type="text" value="223">
让非表单元素获得焦点也是有办法的，先将tabIndex属性设置为-1，再调用focus()方法
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">O elemento div obtem foco</button>
<script>
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
</script>
activeElement
A propriedade document.activeElement é usada para gerenciar o foco DOM, guardando o elemento atualmente focado
[Atenção]Este atributo não é suportado pelo navegador IE
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">O elemento div obtem foco</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
console.log(document.activeElement);//<button>
test.tabIndex = -1;
test.focus();
console.log(document.activeElement);//<div>
}
</script>
Obter foco
Os métodos de obtenção de foco dos elementos são4Tipos, incluindo carregamento da página, entrada do usuário (pressionar Tab), método focus() e atributo autofocus
【1】Carregamento da página
Pelo padrão, quando o documento é carregado, o document.activeElement armazena a referência do elemento body. Durante o período de carregamento do documento, o valor de document.activeElement é null
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】Entrada do usuário (pressionar Tab)
Os usuários geralmente podem usar o Tab para mover o foco, usar a tecla Espaço para ativar o foco. Por exemplo, se o foco estiver em um link, ao pressionar a tecla Espaço, ele será direcionado para o link
Falar sobre o Tab, não pode deixar de mencionar a propriedade tabIndex. A propriedade tabIndex é usada para especificar se o nó do elemento HTML atual deve ser navegado pelo Tab e a prioridade de navegação
1、se o tabIndex=-1，o Tab pulará o elemento atual
2、se o tabIndex=0, significa que o Tab navegará pelo elemento atual. Se um elemento não tiver tabIndex definido, o valor padrão é 0
3、se o tabIndex for maior que 0, significa que o Tab prioriza a navegação. Quanto maior o valor, menor é a prioridade
Neste código, a ordem de obtenção do foco do botão ao usar a tecla Tab é2、5、1、3
<div id="box">
<button tabindex= "3">1</button>
<button tabindex= "1">2</button>
<button tabindex= "0">3</button>
<button tabindex= "-1">4</button>
<button tabindex= "2">5</button>
</div>
<script>
box.onkeyup = function(){
document.activeElement.style.background = 'pink';
}
</script>
【3】focus()
O método focus() é usado para definir o foco do navegador no campo do formulário, ou seja, ativar o campo do formulário, para que ele possa responder aos eventos de teclado
[Atenção]Foi介绍的，如果非表单元素，设置为tabIndex为-1，também pode ganhar foco
<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">elemento span ganhou foco</button>
<button id="btn2">input elemento ganhou foco</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5O campo do formulário adicionou uma propriedade autofocus, ao definir esta propriedade, é possível mover automaticamente o foco para o campo correspondente sem usar JavaScript
[Atenção] Esta propriedade pode ser usada apenas em elementos de formulário, elementos comuns mesmo com tabIndex="-1″também não funciona
<input autofocus value="abc">
hasFocus()
O método document.hasFocus() retorna um valor booleano que indica se há algum elemento ativo ou com foco no documento atual. Ao detectar se o documento ganhou foco, é possível saber se há interação com a página
console.log(document.hasFocus());//true
//Clique em outras abas dentro de dois segundos para sair do foco da página atual
setTimeout(function(){
console.log(document.hasFocus());//false
},2000);
perda de foco
Se usar JavaScript para fazer um elemento perder foco, deve-se usar o método blur()
O método blur() remove o foco do elemento. Ao chamar o método blur(), não transfere o foco para um elemento específico; apenas remove o foco do elemento que chamou o método
<input id="test" type="text" value="123">
<button id="btn1">input elemento ganhou foco</button>
<button id="btn2">input elemento perdeu foco</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
Eventos de foco
Os eventos de foco são acionados quando a página ganha ou perde foco. Utilizando esses eventos em conjunto com o método document.hasFocus() e a propriedade document.activeElement, é possível saber a localização do usuário na página
Os eventos de foco incluem os seguintes4um
1、blur
O evento blur é acionado quando um elemento perde foco. Este evento não é bolbado
2、focus
O evento focus é acionado quando um elemento ganha foco. Este evento não é bolbado
3、focusin
O evento focusin é acionado quando um elemento ganha foco. Este evento é equivalente ao evento focus, mas ele é bolbado
4、focusout
O evento focusout é acionado quando o elemento perde o foco. Este evento é equivalente ao evento blur, mas pode ser bolado
[Atenção] Quanto aos eventos focusin e focusout, além do navegador IE suportar o manipulador de eventos de nível DOM0, outros navegadores suportam apenas DOM2manipulador de eventos de nível
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
<div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">Conteúdo:123o elemento div obteve o foco</button>
<button id="btn2">Conteúdo:123o elemento div perdeu o foco</button>
<button id="reset">Restaurar</button>
<script>
reset.onclick = function(){history.go();}
//método focus
btn1.onclick = function(){
boxIn.tabIndex= -1;
boxIn.focus();
}
//método blur
btn2.onclick = function(){
boxIn.blur();
}
//Evento focusin
if(boxIn.addEventListener){
boxIn.addEventListener('focusin',handler)
}else{
boxIn.onfocusin = handler;
}
function handler(){
this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
box.addEventListener('focusin',handler)
}else{
box.onfocusin = handler;
}
//Evento blur
function fnBlur(){
this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>
Como pode ser visto no resultado da execução, o evento focusin pode ser bolado; enquanto o evento blur não pode ser bolado
Os eventos de foco são frequentemente usados na exibição e validação de formulários
Por exemplo, ao obter o foco, alterar a cor de fundo; ao perder o foco, restaurar a cor de fundo e verificar
<div id="box">
<input id="input}}1"type="text" placeholder="Apenas números permitidos">
<input id="input}}2" type="text" placeholder="Apenas podem ser introduzidos caracteres chineses">
<span id="tips"></span>
</div>
<script>
if(box.addEventListener){
box.addEventListener('focusin',fnIn);
box.addEventListener('focusout',fnOut);
}else{
box.onfocusin = fnIn;
box.onfocusout = fnOut;
}
function fnIn(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'initial';
//Se for um campo de texto de verificação de números
if(target === input1{
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Apenas podem ser introduzidos números, por favor, introduzam novamente'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
//Se for um campo de texto de verificação de caracteres chineses
if(target === input2{
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Apenas podem ser introduzidos caracteres chineses, por favor, introduzam novamente'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
}
</script>
Resumo
Aqui está o resumo completo da gestão de foco no JavaScript para vocês, este artigo é bem detalhado e tem um valor de referência e referência para o estudo e trabalho dos amigos. Se tiverem dúvidas, podem deixar comentários para trocar.