Campo de entrada vacío con JQuery
-
Borrar campo de entrada con
claseyentrada [tipo]definidos -
Borrar campo de entrada con
entrada[tipo]comoSelector
Después de la validación de un formulario, a menudo necesitamos actualizar la página cuando se publican o guardan los datos. Esto es necesario para garantizar la seguridad, ya que el siguiente usuario podría obtener las credenciales del anterior.
En una página web y un formulario bien organizados, nos aseguramos de que los campos de entrada se restablezcan después del envío adecuado. Desafortunadamente, incluso esta convención se sigue tan estrictamente que, después de una cantidad limitada de tiempo de sesión, los campos de entrada se vuelven inválidos y se requiere una actualización.
Este artículo usará un ejemplo de código para aprender un enfoque ampliamente utilizado para borrar un campo de entrada. El punto a favor es que es fácil de implementar.
Borrar campo de entrada con clase y entrada [tipo] definidos
Aquí, configuraremos dos campos de entrada; uno de tipo texto y otro de tipo contraseña. Entonces, lo que haremos es crear un botón que asegure un envío.
Siempre que se haga clic en el botón, el campo de entrada específico se borrará. Así que saltemos a la cerca del código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
</script>
</html>
Producción:
Como puede verse, en el script se iniciaba el jQuery("input[type='text']") y le seguía el .val("").
Esto representa que el campo de entrada estará en blanco en primer lugar y, después del envío, se restablecerá. En este código, hemos utilizado class="input" para complementar el borrado posterior del texto del campo de entrada.
Borrar campo de entrada con entrada[tipo] como Selector
Aquí, simplemente reemplazaremos $("input[type="password"]") con $(:password). Y este selector realizará la misma tarea que antes. Pasemos al fragmento de código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
$(document).ready(function() {
$(":password").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(":password").val("");
});
});
</script>
</html>
Producción:
