Blog
Vuelvo despues de un tiempo con un simple tutorial de Java Script y HTML, en esta ocasión vamos a ver cómo limpiar un input con jQuery. Es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente la de googleapis.
Cómo limpiar un input con jQuery y Java Script
Vamos a ver que el código es muy sencillo y se puede hacer de muchas formas diferente, antes de empezar vamos a definir un botón y un input con un valor, en este caso el valor va a ser “Hola Mundo!”.
<input type="text" value="Hola Mundo!"> <button id="limpiar">Limpiar</button>
El botón al ser oprimido va a limpiar el input, para esto vamos a utilizar el evento click y la funcion val.
$(document).ready(function() { $('#limpiar').click(function() { $('input[type="text"]').val(''); }); });
Si al ejemplo le agregamos varios input más, al oprimir el botón se limpiarían todos ya que se ha especificado eso en el evento click. Para especificar que input se desea limpiar se le pueden agregar un id o una clase, a continuación el ejemplo completo.
<!DOCTYPE html> <html> <head> <title>Limpiar input con jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <input class="hola-mundo-input" type="text" value="Hola Mundo!"> <button id="limpiar">Limpiar</button> <script type="text/javascript"> $(document).ready(function() { $('#limpiar').click(function() { $('.hola-mundo-input').val(''); }); }); </script> </body> </html>
Bueno, eso es todo, espero que les sirva este breve tutorial y ante cualquier inconveniente no duden en dejar un comentario.
Muy buen aporte mil gracias
Muchas gracias por el aporte, me funciono perfecto
Excelente aporte, para mí que estoy iniciando fue muy fácil comprenderlo, mil gracias!
MUY BUENA LA INFO