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">El elemento div obtiene el foco</button>
<script>
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
</script>
activeElement
La propiedad document.activeElement se utiliza para administrar el foco del DOM, guardando el elemento actual con foco
[Advertencia] Este atributo no es compatible con el navegador IE
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">El elemento div obtiene el 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>
obtener el foco
los métodos de obtención de foco de un elemento4tipos, incluyendo la carga de la página, la entrada del usuario (presionar la tecla Tab), el método focus() y la propiedad autofocus
【1】Carga de la página
Por defecto, cuando el documento se carga recién, la referencia almacenada en document.activeElement es la del elemento body. Durante el período de carga del documento, el valor de document.activeElement es null
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】Entrada del usuario (presionar la tecla Tab)
Los usuarios suelen usar la tecla Tab para mover el foco, usar la tecla Espacio para activar el foco. Por ejemplo, si el foco está en un enlace, al presionar una vez la tecla Espacio, se saltará al enlace
Al hablar de la tecla Tab, no podemos dejar de mencionar la propiedad tabindex. La propiedad tabindex se utiliza para especificar si el nodo del elemento HTML actual debe ser recorrido por la tecla Tab y la prioridad de recorrida
1、si tabIndex=-1，la tecla Tab saltará el elemento actual
2、si tabIndex=0, significa que la tecla Tab recorrerá el elemento actual. Si un elemento no tiene configurado tabIndex, el valor predeterminado es 0
3、si tabIndex es mayor que 0, significa que la tecla Tab tiene prioridad en la recorrida. Cuanto mayor sea el valor, menor será la prioridad
En el siguiente código, el orden en que los botones obtienen el foco al usar la tecla Tab es2、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()
El método focus() se utiliza para establecer el foco del navegador en el campo del formulario, es decir, activar el campo del formulario, para que pueda responder a los eventos del teclado
[Advertencia] Como se mencionó anteriormente, si no es un elemento de formulario, se configura tabIndex como-1，también puede obtener el foco
<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">elemento span recibe el foco</button>
<button id="btn2">elemento input recibe el foco</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5Se ha añadido una propiedad autofocus a los campos de formulario, y con solo establecer esta propiedad, se puede mover automáticamente el foco al campo correspondiente sin JavaScript
[Nota] Esta propiedad solo se puede usar en elementos de formulario, los elementos comunes incluso si se establece tabIndex="-1″no tiene efecto
<input autofocus value="abc">
hasFocus()
El método document.hasFocus() devuelve un valor booleano que indica si hay algún elemento activo o con foco en el documento actual. Al detectar si el documento ha recibido el foco, se puede saber si se está interactuando con la página
console.log(document.hasFocus());//true
//Haga clic en otras pestañas en dos segundos para que el foco salga de la página actual
setTimeout(function(){
console.log(document.hasFocus());//false
},2000);
perder el foco
Si se utiliza JavaScript para hacer que un elemento pierda el foco, se debe usar el método blur()
El método blur() tiene como función quitar el foco del elemento. Al llamar al método blur(), no se transfiere el foco a un elemento específico; simplemente se quita el foco del elemento que llama a este método
<input id="test" type="text" value="123">
<button id="btn1">elemento input recibe el foco</button>
<button id="btn2">elemento input pierde el foco</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
Eventos de foco
Los eventos de foco se desencadenan cuando la página recibe o pierde el foco. Utilizando estos eventos y combinándolos con el método document.hasFocus() y la propiedad document.activeElement, se puede saber la ubicación del usuario en la página
Los eventos de foco incluyen lo siguiente4个
1、blur
El evento blur se desencadena cuando un elemento pierde el foco. Este evento no se propaga
2、focus
El evento focus se desencadena cuando un elemento recibe el foco. Este evento no se propaga
3、focusin
El evento focusin se desencadena cuando un elemento recibe el foco. Este evento es equivalente al evento focus, pero se propaga
4、focusout
El evento focusout se desencadena cuando el elemento pierde el foco. Este evento es equivalente al evento blur, pero puede burbujear
[Nota] Respecto a los eventos focusin y focusout, además del navegador IE que admite los manejadores de eventos de nivel DOM0, otros navegadores solo admiten DOM2manejador de eventos de nivel
<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">con contenido de123el elemento div obtiene el foco</button>
<button id="btn2">con contenido de123el elemento div pierde el 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>
De los resultados de ejecución se puede ver que el evento focusin puede burbujear; mientras que el evento blur no puede burbujear
Los eventos de foco se utilizan comúnmente en la presentación y validación de formularios
Por ejemplo, al obtener el foco, modificar el color de fondo; al perder el foco, restaurar el color de fondo y verificar
<div id="box">
<input id="input}}1" type="text" placeholder="solo se pueden ingresar números">
<input id="input}}2" type="text" placeholder="Sólo se pueden introducir caracteres chinos">
<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';
//Si es un cuadro de texto de verificación de números
if(target === input1{
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Sólo se pueden introducir números, por favor, introduzca de nuevo'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
//Si es un cuadro de texto de verificación de caracteres chinos
if(target === input2{
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Sólo se pueden introducir caracteres chinos, por favor, introduzca de nuevo'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
}
</script>
Resumen
Este es un resumen de todo el contenido de gestión de enfoque en JavaScript que les hemos preparado. Este artículo es muy detallado y tiene cierta valoración de referencia para el aprendizaje y el trabajo de todos. Si tienen alguna pregunta, pueden dejar un comentario para intercambiar.