Elementos de enfoque
¿Qué elementos pueden ganarse el enfoque? Por defecto, solo los elementos de formulario pueden enfocarse. Porque solo los elementos de formulario pueden interactuar
<input type = "text" value = "223">
También hay una manera de obtener el enfoque de los elementos no formados. Primero establezca tabIndex a -1 y luego llame focus() .
<div id = "test" style = "altura: 30px; ancho: 100px; fondos: lightgreen"> div </div> <button id = "btn"> Div elemento obtiene enfoque </botón> <script> btn.onclick = function () {test.tabindex = -1; test.focus (); } test.Onfocus = function () {this.style.background = 'Pink';} </script>ActiveElement
document.activeElement se utiliza para administrar el enfoque DOM y guarda los elementos que actualmente obtienen el enfoque.
[Nota] Esta propiedad no es compatible con IE Browser
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div><button id="btn">div element gets focus</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>Enfocar
Hay 4 formas para que los elementos se concentren, incluida la carga de la página, la entrada del usuario (presione la tecla TAB), el método focus() y la propiedad autofocus
【1】 Carga de página
Por defecto, cuando el documento se acaba de cargar, la referencia al elemento del cuerpo se guarda en document.activeElement . Durante la carga de documentos, el valor de document.activeElement es nulo
<script> console.log (document.activeElement); // null </script> <body> <script> console.log (document.activeElement); // <body> </script> </body>
【2】 Entrada del usuario (presione la tecla Tab)
Los usuarios generalmente pueden usar la tecla Tab para mover el foco y usar la barra espacial para activar el foco. Por ejemplo, si el enfoque está en un enlace, presione la barra espacial en este momento y saltará al enlace
Cuando se trata de la tecla TAB, no debemos mencionar tabindex . El atributo tabindex se usa para especificar si el nodo del elemento HTML actual está atravesado por la tecla TAB y la prioridad del recorrido
1. Si tabindex=-1 , la tecla de tabulación omite el elemento actual
2. Si tabindex=0 , significa que la tecla Tab atravesará el elemento actual. Si un elemento no establece tabindex , el valor predeterminado es 0
3. Si tabindex es mayor que 0, significa que la tecla TAB se atraviesa primero. Cuanto mayor sea el valor, menor es la prioridad
En el siguiente código, al usar la tecla Tab, el orden en el que el botón se enfoca es 2, 5, 1 y 3
<div id = "box"> <button tabindex = "3"> 1 </botón> <botón tabindex = "1"> 2 </botón> <botón tabindex = "0"> 3 </botón> <botón tabindex = "-1"> 4 </button> <button Tabindex = "2"> 5 </botón> </civ> <script> box.onKeyUp = function () {documenter.ActiveElement. 'Pink';} </script>【3】 enfoque ()
focus() se utiliza para establecer el foco del navegador en el campo Formulario, es decir, active el campo Formulario para que pueda responder a los eventos de teclado.
[Nota] Como se mencionó anteriormente, si no es un elemento de formulario, establecido en tabIndex a -1, también puede obtener el enfoque
<span id = "test1" style = "Height: 30px; width: 100px;"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> el elemento de la span obtiene enfoque </boton> <botón id = "btn2"> El elemento de entrada obtiene foco </boton> <script> btn1.onclick = = function () {test1.tabindex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </script>【4】 Autofocus
Se ha agregado una propiedad autofocus al campo de formulario HTML5. Mientras se establezca esta propiedad, el enfoque se puede mover automáticamente al campo correspondiente sin JavaScript.
[Nota] Este atributo solo se puede usar para elementos de formulario. Incluso si el elemento normal está configurado en tabIndex=”-1″ , no entrará en vigencia.
<Input AutoFocus Value = "ABC">
Hasfocus ()
document.hasFocus() devuelve un valor booleano que indica si algún elemento en el documento actual se activan o se ganan enfoque. Al verificar si el documento ha ganado el enfoque, puede saber si está interactuando con la página.
console.log (document.hasfocus ()); // true // Haga clic en otras pestañas en dos segundos para hacer que el enfoque deje la página actual setTimeOut (function () {console.log (document.hasfocus ()); // false}, 2000);PERDIDO ENFOCH
Si usa JavaScript para perder el enfoque, debe usar blur()
La función del método blur() es eliminar el enfoque del elemento. Al llamar blur() , el enfoque no se transferirá a un elemento específico; es solo para eliminar el enfoque del elemento llamando al método
<input id = "test" type = "text" value = "123"> <button id = "btn1"> El elemento de entrada gana enfoque </boton> <button id = "btn2"> El elemento de entrada pierde enfoque </botón> <script> btn1.oncclick = function () {script.focus ();} btn2.onclick = function () {test.blur ();};}Eventos de enfoque
El evento de enfoque se activa cuando la página gana o pierde el enfoque. Utilizando estos eventos y cooperando con document.hasFocus() y la propiedad document.activeElement , puede conocer el paradero del usuario en la página.
Los eventos de enfoque incluyen los siguientes 4
1. Desduza
El evento blur se dispara cuando el elemento pierde el enfoque. Este evento no burbujeando
2. Enfoque
focus se dispara cuando el elemento se enfoca. Este evento no burbujeando
3. Focusin
focusin se dispara cuando el elemento se enfoca. Este evento es equivalente al evento focus , pero burbujea
4. Enfoque
focusour se dispara cuando el elemento pierde el enfoque. Este evento es equivalente al evento Blur, pero burbujea
[Nota] Con respecto a los eventos de enfoque y enfoque, excepto el navegador IE que apoya el manejador de eventos de nivel DOM0, otros navegadores solo admiten el manejador de eventos de nivel DOM2
<div id = "box" style = "Display: Inline-Block; Padding: 25px; Background-Color: LightGreen;"> <Div ID = "Boxin" Style = "Altura: 50px; Width: 50px; Background-Color: Pink;"> 123 </div> </div> <Button ID = "Btn1"> Div Elemento con contenido 123 Obtiene enfoque </botón> <botón de botón) Pierde enfoque </boton> <button id = "reset"> restaurar </botón> <script> reset.onclick = function () {History.go ();} // focus () método btn1.onclick = function () {boxin.tabindex = -1; boxIn.focus ();} // blur () método btn2.onClick = function () {boxIn.blur ();} // focusin Event if (boxin.addeventListener) {boxIn.adDeventListener ('focusin', Handler)} else {boxin.onfocusin = handler;} function handler () {this.tround.tallytyyle.tallytyle.ToLTyle = 'LightBlue';} if (box.adDeventListener) {box.adDeventListener ('focusin', handler)} else {box.onfocusin = handler;} // función de evento blur fnblbl () {this.style.backgroundcolor = 'naranja';} boxin.onblur = fnblur; box.onblur; De los resultados de ejecución, podemos ver que focusin puede burbujear; Mientras que el evento blur no puede burbujear.
Los eventos de enfoque a menudo se usan para la visualización y verificación de formularios
Por ejemplo, cuando obtenga el enfoque, modifique el color de fondo; Cuando pierda el enfoque, restaure el color de fondo y verifique.
<div id = "box"> <input id = "input1" type = "text" placeholder = "solo ingrese números"> <input ID = "input2" type = "text" placeholder = "solo ingrese caracteres chinos"> <span id = "tips"> </span> </div> <script> if (box.addeventListener) {box.adDeventListener ('focusin', fnin ', Fnin', fnin ', fnin', fnin ', fnin', fnin ', Fnin', Fnin ', Fnin', Fnin ', Fnin; box.adDeventListener ('Focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} function fnin (e) {e = e || evento; Var Target = E.Target || E.Sracelement; Target.Style.BackgroundColor = 'LightGreen';} function fnOut (e) {e = e || evento; Var Target = E.Target || E.Sracelement; Target.Style.BackgroundColor = 'Initial'; // Si es un cuadro de texto que verifica el número if (target === input1) {if (!/^/D*$/. Test (target.value.trim ())) {target.focus (); tips.innerhtml = 'solo ingrese números, vuelva a ingresar' setTimeout (function () {tips.innerhtml = ''}, 500); }} // Si es un cuadro de texto que verifica los caracteres chinos if (target === input2) {if (!/^[/U4e00-/u9fa5]*$/. Test (target.value.trim ())) {target.focus (); tips.innerhtml = 'solo ingrese los caracteres chinos, por favor vuelva a ingresar' setTimeout (function () {tips.innerhtml = ''}, 500); }}}} </script>Resumir
Lo anterior es resumir todo el contenido de la gestión de enfoque en JavaScript para usted. Este artículo se introduce en detalle y tiene cierto valor de referencia para su estudio y trabajo. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.