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