JavaScript | Enfocar
Para comprender mejor el enfocar() Método, mire su sintaxis a continuación:
elemento.Enfoque (opciones);
En esta sintaxis:
- elemento: Es la referencia de un elemento HTML dentro de JavaScript.
- opción: No es un parámetro requerido.
Ejemplo 1: Centrarse en un campo de texto utilizando el método Focus ()
Comience creando un nuevo documento HTML, y en ese documento, cree un campo de entrada y un botón con las siguientes líneas:
En las líneas anteriores:
- La etiqueta de entrada ha recibido la identificación como "TF1"
- El botón tiene la identificación como "BTN1"Y un atributo OnClick establecido igual a" Buttonclicked () "
Ejecutar este documento HTML muestra lo siguiente en el navegador:
El campo de texto y el botón se muestran en la página web. Ahora para agregar la funcionalidad al presionar el botón, agregue las siguientes líneas en el archivo JavaScript:
función buttonclicked ()
tf = documento.getElementById ("TF1");
TF.enfocar();
En las líneas de JavaScript anteriores:
- Primero cree una función llamada como Buttonclicked ()
- En esa función, obtenga la referencia del campo de texto utilizando su ID y almacene esa referencia en el "TF" variable
- Después de eso, simplemente llame al enfocar() método con el "TF"Variable con la ayuda del operador DOT
En este punto, la página web produce el siguiente resultado:
Es observable en la salida, que presionar el puesto pone el campo de texto como activo o "enfocado".
Ejemplo 2: Centrarse en un elemento con argumentos de "opciones"
En este ejemplo, el objetivo principal es tener un elemento en una posición desplazable. Después de eso, el botón no solo debe centrarse en ese elemento, sino también poner a la vista ese elemento desde el documento.
Comience creando un documento HTML, y al igual que en el primer ejemplo, cree un campo de texto y un botón con las siguientes líneas:
type = "texto"
id = "tf1"
class = "desplazado"
PLACELATHER = "Soy un campo de texto"
/>
En estas líneas, la única diferencia es:
- La entrada que ahora tiene una clase "despapateado”, Que se utilizará para colocar esta etiqueta de entrada en una posición desplazable en el documento
Después de eso, agregue las siguientes líneas al archivo CSS o en el etiqueta:
cuerpo
Altura: 7000px;
.desplazado
Posición: Absoluto;
arriba: 4000px;
En las líneas mencionadas anteriormente:
- El documento ha sido una altura de 7000px para que el documento se vuelva desplazable
- Después de eso, estamos configurando el elemento con el despapateado clase a una posición absoluta de 4000px en la parte superior
Ejecutar este documento HTML Dé la siguiente página web en el navegador:
Desde la salida, está claro que el campo de texto ahora se coloca en una posición de 4000px desde la parte superior.
Después de eso, vamos a agregar las siguientes líneas de JavaScript:
función buttonclicked ()
tf = documento.getElementById ("TF1");
TF.foco (Preventscroll: false);
En estas líneas:
- Una función Buttonclicked () está hecho
- En esa función, se hace una referencia al campo de texto utilizando su ID y se almacena dentro de la variable "TF".
- Después de eso, aplique el enfocar() Método en el campo de texto y en su argumento Pase PREVENTSCROLL: FALSE. Esto pondrá en foco el elemento y desplazará el documento para poner ese elemento a la vista.
Ejecute el documento HTML y obtendrá el siguiente resultado al hacer clic en el botón:
Es observable desde la salida que al hacer clic en el botón, el campo de texto se lleva a la vista del navegador desplazando el documento. Además, el campo de texto ahora se está centrando en.
Conclusión
Este artículo arroja luz sobre el propósito y el funcionamiento del enfocar() Método en JavaScript. Este método se utiliza para enfocar un elemento del documento HTML, o en palabras mucho más simples, establece su propiedad activa como verdadera. Para aplicar este método, simplemente úselo con la referencia del elemento HTML con un operador DOT. Este método de enfoque también puede tomar un argumento opcional que se ha demostrado anteriormente.