Para detectar si el contenido del texto de entrada cambia o no, estamos utilizando el método .on() de JQuery.
.on()
Este es un método incorporado proporcionado por jQuery y se usa para adjuntar controladores de eventos para los elementos seleccionados y sus elementos secundarios.
Sintaxis:
$(selector).on(event, childSel, data, fun, map)
parámetros:
- evento: Este parámetro es obligatorio. Define eventos o espacios de nombres para adjuntar a los elementos seleccionados. Si se van a proporcionar múltiples eventos, deben estar separados por espacios.
- childSel: Este parámetro es opcional. Define que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica los datos adicionales para pasar a la función.
- diversión: este parámetro es opcional. Especifica la función que se ejecutará cuando ocurra un evento.
- mapa: este parámetro especifica un mapa de eventos ({evento: función, evento: función, …}) que contiene uno o más eventos y funciones para ejecutar cuando ocurren los eventos
Ejemplo-1: En este ejemplo, aparece un cuadro de alerta que dice ‘¡El contenido del texto cambió!’ cuando el texto de la entrada cambió.
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
detect a textbox's content has changed.
</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>
Change the text of input text and
click outside of it to see.
</p>
<input id="input"
name="input"/>
<br>
<br>
<script>
$("#input").on("change", function() {
alert('Text content changed!');
});
</script>
</body>
</html>
Producción:
- Después de hacer clic fuera del cuadro de entrada:
Ejemplo-2: En este ejemplo, aparece un cuadro de alerta que dice ‘¡El contenido del texto cambió!’ cuando cualquiera de las actividades sucede.
- el texto de la entrada cambió.
- sucede el evento keyup.
- Se pega algo en el cuadro de entrada.
- se produce un cambio de propiedad.
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
detect a textbox's content has changed.
</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>
Change the text of input text
and click outside of it to see.
</p>
<input id="input"
name="input" />
<br>
<br>
<script>
$("#input").on(
"propertychange change keyup paste input", function() {
alert('Text content changed!');
});
</script>
</body>
</html>
Producción:
- Después de que ocurra el evento:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA