Código de JQuery - Mascaras en los inputs

Imágen de perfil
Val: 293
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mascaras en los inputsgráfica de visualizaciones


JQuery

Publicado el 21 de Mayo del 2014 por Xavi (548 códigos)
51.824 visualizaciones desde el 21 de Mayo del 2014
Aquí se muestra como utilizar el plugin de jquery maskedinput para poner mascaras en nuestros inputs, como por ejemplo, para añadir un numero de teléfono, un numero con dos decimales, etc...

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 21 de Mayo del 2014gráfica de visualizaciones de la versión: Versión 1
51.825 visualizaciones desde el 21 de Mayo del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí

Necesitas descargar el plugin maskedinput de: http://digitalbush.com/projects/masked-input-plugin/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="jquery.maskedinput.min.js" type="text/javascript"></script>
    <style>
    div span {
        display:inline-block;
        width:250px;
    }
    h2 {
        font-size:1em;
    }
    input {
        padding:5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    }
    input:focus {
        outline:0px;
    }
    .ok {
        border-color:blue;
    }
    </style>
 
    <script type="text/javascript">
        jQuery(function($){
            $("#numero1").mask("9,99", {
 
                // Generamos un evento en el momento que se rellena
                completed:function(){
                    $("#numero1").addClass("ok")
                }
            });
 
            // Definimos las mascaras para cada input
            $("#date").mask("99/99/9999");
            $("#movil").mask("999 99 99 99");
            $("#letras").mask("aaa");
            $("#comodines").mask("?");
        });
    </script>
</head>
 
<body>
<h1>Mascaras en los inputs</h1>
<h2>Aqui se muestra como utilizar el plugin de jquery maskedinput para poner mascaras en nuestros inputs.</h2>
 
<div><span>numero con dos decimales</span><input type="text" id="numero1"> 9,99 (generamos un evento al rellenarlo)</div>
<div><span>fecha</span><input type="text" id="date"> 99/99/9999</div>
<div><span>movil</span><input type="text" id="movil"> 999 99 99 99</div>
<div><span>Solo tres letras</span><input type="text" id="letras"> aaa</div>
 
<p><a href="http://digitalbush.com/projects/masked-input-plugin">http://digitalbush.com/projects/masked-input-plugin</a></p>
<p><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (3)

Rodolfo B
21 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
Necesito hacer una mascara para que en un imput text solo se pueda ingresar numeros, Al establecer una mascara me pide que ingrese exactamente la cantidad de digitos que estan en la definicion de la mascara y necesito que se ingrese cualquier numero que vaya del 1 al 99999
Como seria la mascara a configurar
Gracias
Responder
juan juarez
26 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
$("#numeros").mask("99999");
Responder
Charly Days
24 de Abril del 2020
estrellaestrellaestrellaestrellaestrella
Buen día, dos preguntas:
1. Como puedo poner caracteres alfanuméricos
2. Puedo hacer una mascara con Mayusculas y Minúsculas
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2675