Dado un formulario de búsqueda, debemos colocar el cursor en el formulario de búsqueda al hacer clic en un botón usando jQuery . Esto se puede hacer usando el método focus() y el método click() .
Crearemos una página web con un cuadro de texto y un botón . Agregaremos la funcionalidad usando jQuery de modo que al hacer clic en el botón, el cursor se establezca en el cuadro de texto. Ahora analicemos algunos métodos que usaremos en la implementación.
Método click(): El método click() en jQuery inicia el evento de clic o ejecuta la función que se le pasa cuando se activa un evento de clic.
Sintaxis:
$(selector).click(function);
Parámetro: Acepta una “función” de parámetro opcional, que se ejecutará cuando ocurra un evento de clic.
Valor devuelto: Devuelve el elemento seleccionado con la función especificada a realizar.
Método focus(): El método focus() activa el evento de enfoque o ejecuta la función que se le pasa cuando se activa un evento de enfoque. El método focus() se puede usar para enfocar un elemento específico usando el selector.
Sintaxis:
$(selector).focus()
Parámetro: Acepta una “función” de parámetro opcional que se ejecutará cuando ocurra un evento de foco.
Enlaces CDN de jQuery:
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
Pasos:
- Agregue jQuery CDN al script o descárguelos a su máquina local.
- Cree un cuadro de texto y un botón usando bootstrap para que se vea bien.
- Abra la etiqueta del script y escriba la función del controlador de clics al hacer clic en el botón usando la función click() .
- En el controlador de clics, use el método focus() para colocar el cursor en el cuadro de texto usando el selector.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Set cursor in search form</strong>
<br />
<form class="form-inline mt-4">
<input type="text" class="form-control mx-2"
id="textInput" placeholder="Focus Me...">
<button id="focusButton" type="button"
class="btn btn-secondary">
Click Here To Focus
</button>
</form>
<script>
$(document).ready(function () {
$('#focusButton').click(function () {
$("#textInput").focus();
})
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA