La tarea es establecer el foco en el campo de texto de entrada de formulario usando JQuery. Para ello, a continuación se comentan algunas de las técnicas más utilizadas.
El primer método focus() debe discutirse.
- Método jQuery focus():
el evento de enfoque ocurre cuando un elemento recibe el foco (ya sea seleccionado con un clic del mouse o «navegando con la pestaña»).
Este método desenstring el evento de enfoque o agrega una función para que se ejecute cuando se produce el evento de enfoque.
Sintaxis:- Active el evento de enfoque para los elementos seleccionados:
$(selector).focus()
- Adjunte una función al evento de enfoque:
$(selector).focus(function)
Parámetros:
- función: Este parámetro es opcional. Especifica la función a ejecutar cuando ocurre el evento de foco.
- Active el evento de enfoque para los elementos seleccionados:
Ejemplo 1: en este ejemplo, el campo de texto de entrada del formulario obtiene el foco a medida que se carga la página mediante el uso del método focus() . Aquí, el elemento de entrada se selecciona mediante la palabra clave de entrada en el selector de JQuery.
<!DOCTYPE HTML> <html> <head> <title> JQuery | Set focus on a form input text field on page load. </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> This input box gets the focus as the page loads. </p> <form id="form"> Input : <input type="text" name="input_field" /> </form> <br> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> $("input:text").focus(); </script> </body> </html>
Producción:
- Antes de que se cargue la página:
- Después de cargar la página:
Ejemplo 2: en este ejemplo, el campo de texto de entrada del formulario obtiene el foco a medida que se carga la página mediante el uso del método focus() . Aquí, el elemento de entrada se selecciona mediante la identificación del elemento de formulario y su propia identificación en el selector de JQuery.
<!DOCTYPE HTML> <html> <head> <title> JQuery | Set focus on a form input text field on page load. </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> This input box gets the focus as the page loads. </p> <form id="form"> Input : <input id="form_input" type="text" name="input_field" /> </form> <br> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> $("#form #form_input").focus(); </script> </body> </html>
Producción:
- Antes de que se cargue la página:
- Después de cargar la página:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA