Código de JQuery - Mascaras en los inputs

Imágen de perfil
Val: 389
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

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 21 de Mayo del 2014 por Xavi (530 códigos)
44.897 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
44.899 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2675