Como hacer que una caja de texto solo permita números con #jquery

Algunas veces necesitamos que una caja de texto solo acepte números (puedes ver mi otra entrada: cómo hacer que una caja de texto solo permita letras y espacios con jquery), para hacerlo podemos hacer uso de la siguiente función:

 $(".number").keydown(function (e) {
            // Permite: backspace, delete, tab, escape, enter and .
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                // Permite: Ctrl+A
                (e.keyCode == 65 && e.ctrlKey === true) ||
                // Permite: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                // solo permitir lo que no este dentro de estas condiciones es un return false
                return;
            }
            // Aseguramos que son numeros
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        });

Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.


<input type="text" class="number">

Como hacer que una caja de texto solo permita letras y espacio con #jquery

Para obligar que una caja de texto solo acepte letras y espacios, sin caracteres especiales (¿¡¨*)¨o números, podemos hacerlo así de sencillo:

Código HTML

<input class="letras" type="text" >
<input class="letras" type="text" >
<input class="letras" type="text" >

Código Javascript/Jquery

$(".letras").keypress(function (key) {
            window.console.log(key.charCode)
            if ((key.charCode < 97 || key.charCode > 122)//letras mayusculas
                && (key.charCode < 65 || key.charCode > 90) //letras minusculas
                && (key.charCode != 45) //retroceso
                && (key.charCode != 241) //ñ
                 && (key.charCode != 209) //Ñ
                 && (key.charCode != 32) //espacio
                 && (key.charCode != 225) //á
                 && (key.charCode != 233) //é
                 && (key.charCode != 237) //í
                 && (key.charCode != 243) //ó
                 && (key.charCode != 250) //ú
                 && (key.charCode != 193) //Á
                 && (key.charCode != 201) //É
                 && (key.charCode != 205) //Í
                 && (key.charCode != 211) //Ó
                 && (key.charCode != 218) //Ú

                )
                return false;
        });

Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos.
Este código también tiene anexados los códigos para las letras con acentos y la ñ.

Ejecutar código #javascript ya cargadas todas las imágenes con #jquery

En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:

$(document).ready(function(){    
//script que se ejecuta cuando se cargo el DOM
});

Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).

Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:

$(window).load(function(){
    //script que se ejecuta cuando se cargo el DOM y las IMAGENES
})

¿Cómo hacer una petición ajax por medio de submit? #jquery #ejemplos

Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]).
Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…).
Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común.
El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):

Código HTML

    <form id="miForm" action="/peticion.php">
    	<input name="cajaTexto" type="value" value="pato" />
        <input type="submit" value="Enviar" />
    </form>

Código Jquery

//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
		//de esta manera remplazamos

		//ahora obtendremos los atributos que necesitaremos
		url=$(this).prop("action")
		//la función serialize nos regresa los input, es importante ponerles name
		parametros=$(this).serialize()

		//aqui utilizamos la petición, en este caso post
		$.post(url,parametros,function(data){
			//aqui es cuando ya se hizo nuestra petición
			//regularmente yo regreso 1 para mostrar exito
				if(data=="1"){
					alert("exito")
				}else{
					//si no regreso el 1, regreso el error y asi lo muestro
					alert(data)
				}
		})

		//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
		//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
		//REFRESCANDO TODA LA PAGINA.
		return false;

})

De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.

Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un “1”, sino el error.

¿Cómo obtener los valores del atributo data de HTML5 con #jquery? ejemplos

A partir de HTML5 fueron creados los atributos data.
Estos atributos nos sirven para guardar cualquier cosa y su utilización es la siguiente:

<div id="divDireccion"
     data-direccion="Calle Lorenzo Higareda"
     data-numero="18"
     data-colonia="tetlan">
                           Un div lleno de datas</div>

Recuerda poner la palabra data seguida de un guión (data-*) y despues el nombre de tu atributo.

Con jquery, existen una manera fácil de obtener los valores, y para ello utilizaremos la función data() y dentro el nombre de nuestro atributo.
El siguiente ejemplo explica de una manera rápida y fácil como podemos obtener los valores:

//utilizando el div anterior obtenemos los valores con la función data y el selector sobre el div que los contiene
direccion=$("#divDireccion").data("direccion")
numero=$("#divDireccion").data("numero")
colonia=$("#divDireccion").data("colonia")
//mostramos los 3 valores
alert(direccion+" "+numero+" "+colonia)

El nombre que se pone dentro de la función data(), es sin el data- que lo precede

Para asignar un valor a los atributos data por medio de jquery, es de la siguiente manera:

//utilizando el mismo div puesto con anterioridad
$("#divDireccion").data("direccion","Calle Sta Ana")
//obtenemos el valor de data nuevamente
direccion=$("#divDireccion").data("direccion")
//mostramos en un alert, veremos el nuevo valor
alert(direccion)

¿Cómo funciona la función closest() de jquery? #ejemplos #jquery

La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado.
A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.

Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.

Esta función solo nos seleccionara el primer elemento encontrado con el selector dado.
A continuación muestro un ejemplo de como funciona closest():

Código HTML

<div class="abuelo">
  <div>
    <input id="hijo1" type="text" value="Soy el hijo 1" />

    <input id="hijo2" type="text" value="Soy el hijo 2" />
  </div>
</div>

Código Jquery

$(document).ready(function(){
		//asi seleccionamos el hijo1
		hijo1=$("#hijo1");

		//de esta manera podemos seleccionar a padre por medio de closest()
		padre=hijo1.closest("div");

		//mostramos el contenido html para confirmar que seleccionamos el div padre
		alert(padre.html())

		//asi seleccionamos al abuelo mediante su clase
		abuelo=hijo1.closest(".abuelo")

		//mostramos html del abuelo
		alert(abuelo.html())
	})

¿Cómo seleccionar una columna en especifico de toda la tabla con jquery? #eq

Algunas veces, por comodidad, o por que no queda de otra, se nos ocurre realizar alguna operación con todas las celdas de una columna de una tabla de jquery, es decir, poder seleccionar la primer columna y todas sus celdas, o la segunda columna etc, y a estos elementos realizar una acción. Para ello pongo el siguiente ejemplo:

Teniendo la siguiente tabla:

<table id="miTabla">
	<tr>
		<td>pato</td>
		<td>12</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>1</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>15</td>
	</tr>
	<tr>
		<td>pato</td>
		<td>16</td>
	</tr>
<table>

Supongamos que deseamos realizar una sumatoria de los valores de la segunda columna, para ello la clave esta en el selector junto al filtro eq, y se puede hacer de la siguiente manera:

var total=0;

//selector &gt;&gt;  $("#GridView1 tr").find('td:eq(1)')
//De esta manera utilizando eq seleccionamos la segunda fila, ya que la primera es 0
$("#miTabla tr").find('td:eq(1)').each(function () {

 //obtenemos el valor de la celda
  valor = $(this).html();

 //sumamos, recordar parsear, si no se concatenara.
 total += parseInt(valor)
})

//mostramos el total
alert(total)

Así de sencillo seleccionamos una columna en especifico.

Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []

¿Cómo obtener el texto de un option en un select con jquery? #combobox #texto #jquery

Alguna veces es necesario obtener el texto de un elemento option(El texto visual, no el valor), el cual esta seleccionado en un elemento select(combobox), esto se puede hacer de la siguiente forma, ayudándonos de jquery:

Codigo HTML

<select id="miSelect">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option selected value="3">Tres</option>
    <option value="4">Cuatro</option>
    <option value="5">Cinco</option>
</select>

Codigo Jquery


$( "#miSelect option:selected" ).text();

10.- Creación de Elementos HTML con Jquery – Curso Básico de #Jquery #10

En este capitulo (y el ultimo de este curso), veremos cómo crear elementos HTML de forma dinámica y con la ayuda de jquery (podría también ser de interés ver como se realiza esto sin jquery, con javascript puro en otro artículo que hice hace tiempo).

Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.

Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos  que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.

El código es el siguiente:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
         <script src="../scripts/jquery.js"></script>

           <style>
			#tutorial .bloque{
				float:left;
				width:110px;
			}
			#tutorial input,#tutorial label{
				font-size:11px;
				width:60px;
			}
			#tablaProductos,#tablaProductos td,#tablaProductos th{
				border:1px solid #333;
				border-collapse:collapse;
			}
			#tableProductos th{
				width:100px;
			}
			</style>
    </head>

    <body>
         <div id="tutorial">
            <div >
                <div class="bloque">
                    <label>Código</label>
                    <input class="texto" type="text" id="txtCodigo" value="" />
                </div>
                <div class="bloque">
                    <label>Nombre</label>
                    <input class="texto" type="text" id="txtNombre" value="" />
                </div>
                  <div class="bloque">
                    <label>Precio</label>
                    <input class="texto" type="text" id="txtPrecio" value="" />
                </div>
                <div class="bloque">
                    <input value="Agregar" type="button" onclick="Agrega()" />
                </div>
                <div style="clear:both"></div>
            </div>

            <div>
                <table style="width:400px;" id="tablaProductos">
                    <tr>
                        <th>Código</th>
                        <th>Nombre</th>
                        <th>Precio</th>
                        <th>X</th>
                    </tr>
                </table>
            </div>
         </div>
    </body>
</html>

Código Jquery

function Agrega(){

	//obtenemos los valores de nuestra caja de texto
	nodoAInsertar="&lt;tr&gt;"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla

	$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos

		nodoAInsertar+="&lt;td&gt;"; //abrimos td

		nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto

		nodoAInsertar+="&lt;/td&gt;" //cerramos td

		//limpiamos la caja de texto actual
		$(this).val("");
	});

	//agregamos el botpon para eliminar
	nodoAInsertar+="&lt;td&gt;&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;&lt;/td&gt;"
	nodoAInsertar+="&lt;/tr&gt;" //cerramos el tr

	//por ultimo insertamos el nodo tr a la tabla
	$("#tablaProductos").append(nodoAInsertar)

	//ponemos el foco en la caja de texto código
	$("#txtCodigo").focus()
}

function Elimina(NodoBoton){

	//recibimos el botón como parametro y lo transformamos a jquery
	var botonEliminar=$(NodoBoton);

	//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
	var padreTRBoton=$(botonEliminar).parent().parent();

	padreTRBoton.remove();

	//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}

Código en ejecución

Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.

Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.

Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.

Ir al  Capitulo Anterior (9.- La función Animate).

9.- La función Animate – Curso Básico de #Jquery #9

La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.

Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.

Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>animate</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="inicia();" />
        <div  style="width:100px; position:relative; height:100px; background:#060;"></div>
        <br />

    </body>
</html>

Código Jquery


$("div")
    .animate({ //seleccionamos el div
            opacity: 0.25, //dismunuye la opacidad del objeto
            left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
            height: "toggle" //oculta el objeto
        }, 2000 //la animación se realiza en 2 segundos
        ,
        function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
            $("div").animate({ //seleccionamos nuevamente el div
                    opacity: 1, //regresa la opacidad del objeto a normal
                    left: "-=100", //dismunuye la posicion del objeto menos 100 px
                    height: "toggle" //aparece el objeto
                }, 1000 //tiempo de 1 segundo
                , inicia //el callback ejecuta la funcion inica para volver a comenzar todo
            )
        })
}

Ejemplo en ejecución

El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.

Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).

Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).

Ir al  Capitulo Anterior (8.- Callbacks).