jQuery

Cómo limpiar un input con jQuery

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

One comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *