Código de JQuery - Mascaras en los inputs

Imágen de perfil

Mascaras en los inputsgráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 21 de Mayo del 2014 por Xavi
15.008 visualizaciones desde el 21 de Mayo del 2014. Una media de 119 por semana
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(2)

Publicado el 21 de Mayo del 2014gráfica de visualizaciones de la versión: Versión 1
15.009 visualizaciones desde el 21 de Mayo del 2014. Una media de 119 por semana
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 (2)

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

Comentar la versión: Versión 1

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

http://lwp-l.com/s2675