[RESUELTO] Máscara de entrada en textfield [RESUELTO]

angel_dope · #1 (**permalink**) 10/06/2003, 04:07

Hola de nuevo a tol mundo!!! Aqui estoy otra vez con un problema que puede que tenga facil solución, peeeeero... que yo desconozc

Lo que quiero hacer es ponerle una máscara de entrada a un textfield, para que el usuario sepa que formato debe emplear (en este caso concreto es de una fecha), al principio habia pensado en ponerle como valir inicial las barras en el sitio que toca, pero claro, cuando el usuario escribe, las barras se desplazan y no sirve pa na

. Alguien sabe como podria solucionar esto y que las barras estén fijas en esa posición, o cualquier otra manera de hacerlo????

He encontrado el siguiente código en las faq que sirve para ir dando formato a un número mientras se escribe, de forma que queden separados los miles por un punto y los decimales por una coma (1.200,45) Alguien sabria como modificarlo para que me inserte las barras en una fecha a medida que la vaya escribiendo (12/12/2000) ???? Yo lo he intentado, pero como no tengo mucha idea de esto no he conseguido nada, aparte de que me ponga las barras en lugar de el punto y la coma

Pongo el código por si alguien sabría como hacerlo

Código PHP:

  <html> 
 <head> 
  <script language="JavaScript"> 
   function currencyFormat(fld, milSep, decSep, e) { 
    var sep = 0; 
    var key = ''; 
    var i = j = 0; 
    var len = len2 = 0; 
    var strCheck = '0123456789'; 
    var aux = aux2 = ''; 
    var whichCode = (window.Event) ? e.which : e.keyCode; 
    if (whichCode == 13) return true; // Enter 
    key = String.fromCharCode(whichCode); // Get key value from key code 
    if (strCheck.indexOf(key) == -1) return false; // Not a valid key 
    len = fld.value.length; 
    for(i = 0; i < len; i++) 
     if ((fld.value.charAt(i) != '0') && (fld.value.charAt(i) != decSep)) break; 
    aux = ''; 
    for(; i < len; i++) 
     if (strCheck.indexOf(fld.value.charAt(i))!=-1) aux += fld.value.charAt(i); 
    aux += key; 
    len = aux.length; 
    if (len == 0) fld.value = ''; 
    if (len == 1) fld.value = '0'+ decSep + '0' + aux; 
    if (len == 2) fld.value = '0'+ decSep + aux; 
    if (len > 2) { 
     aux2 = ''; 
     for (j = 0, i = len - 3; i >= 0; i--) { 
      if (j == 3) { 
       aux2 += milSep; 
       j = 0; 
      } 
      aux2 += aux.charAt(i); 
      j++; 
     } 
     fld.value = ''; 
     len2 = aux2.length; 
     for (i = len2 - 1; i >= 0; i--) 
      fld.value += aux2.charAt(i); 
     fld.value += decSep + aux.substr(len - 2, len); 
    } 
    return false; 
   } 
  </script> 
 </head> 
 <body> 
  <form> 
   Tipee un número:  
   <input type="text" name="test" length="15" onKeyPress="return(currencyFormat(this,',','.',event))"> 
  </form> 
 </body> 
</html>

Muchas gracias por adelantado a tod@s, salu2

KarlanKas · #2 (**permalink**) 10/06/2003, 04:19

Esto se resuelve tan ricamente con Javascript. Aunque también podrías poner unos select. Uno para el día (1-31), otro para el mes(1-12) y otro para el año (2000-2010).

Pero en cualqueir caso te mando a JS!

angel_dope · #3 (**permalink**) 10/06/2003, 04:21

De acuerdo KarlanKas, a ver si ahi me ayudan ;) En cuanto a lo de los select... no se, casi q prefiero el textbox, xq es una aplicación que estaba hecha en access y que he pasado a formato web, y quieren que todo esté lo más parecido posible al original cn el que llevan trabajando varios años, para que no tengan que volver a acostumbrarse a usar un nuevo formato

davidvamo · #4 (**permalink**) 10/06/2003, 09:55

prueba con esto, en un alargo de inspiración metodica me salio esto.

Código PHP:

  /*  
    SOLO ACEPTAMOS NUMEROS EN UN <input> 
     
 EJEMPLO: <input type="Text" name="NombreCampo" onKeyPress="return acceptNum(tipo, event, this)"> 
 PARAMETROS: 
    1.- TIPO 
        1.1.- "F" : daremos el formato de fecha dd/mm/aaaa 
                Se ha formateado para que salgan la barra / automáticamente.  
                Sólo hay que escribir los numeros 
        1.2.- ""  : sólo podremos escribir números 
*/ 
function acceptNum(tipo, evt, cadena){     
    // NOTE: Backspace = 8, Enter = 13, '0' = 48, '9' = 57, '46' = .     
    var key = nav4 ? evt.which : evt.keyCode;     
    if (tipo=="F"){ FormatearFechas(cadena); } 
    if (tipo=="M"){  
        return (key <= 13 || (key >= 48 && key <= 57) || key==46); 
    }else{ 
        return (key <= 13 || (key >= 48 && key <= 57)); 
    } 
}

Código PHP:

  // Formateamos fecha para que tenga el format de dd/mm/aaaa 
function FormatearFechas(cadena){ 
    if (cadena.value.length==2){ cadena.value = cadena.value + "/"; } 
    if (cadena.value.length==5){ cadena.value = cadena.value + "/"; } 
}

angel_dope · #5 (**permalink**) 11/06/2003, 02:55

Pues no me ha funcionado eso, pero weno, ya está resuelto, me han ayudado dos compañeros (gracias Ruben y Oscar) y ya funciona, pongo el código por si a alguien le viene bien:

Código PHP:

  <html> 
 <head> 
  <script language="JavaScript"> 
   function currencyFormat(fld, milSep, decSep, e) { 
    var sep = 0; 
    var key = ''; 
    var i = j = 0; 
    var len = len2 = 0; 
    var strCheck = '0123456789'; 
    var aux = aux2 = ''; 
    var whichCode = (window.Event) ? e.which : e.keyCode; 
    if (whichCode == 13) return true; // Enter 
    key = String.fromCharCode(whichCode); // Get key value from key code 
    if (strCheck.indexOf(key) == -1) return false; // Not a valid key 
    len = fld.value.length; 
    for(i = 0; i < len; i++) 
     if ((fld.value.charAt(i) != decSep)) break; 
    aux = ''; 
    for(; i < len; i++) 
     if (strCheck.indexOf(fld.value.charAt(i))!=-1) aux += fld.value.charAt(i); 
    aux += key; 
    len = aux.length; 
    if (len == 0) fld.value = ''; 
    if (len == 1) fld.value = aux; 
    if (len == 2){ 
        if (aux>31) 
        window.alert("El dia debe ser inferior a 31");//CAPULLO 
        else 
        fld.value = aux; 
    } 
    if (len > 2 && len < 5) { 
     if (len == 4){ 
        if (aux.substr(len - 2, len)>12) 
        window.alert("El mes debe ser inferior a 12");//RECAPULLO, ES Q NO SABES DE FECHAS?? 
        else 
        fld.value = aux; 
    } 
     aux2 = ''; 
     for (j = 0, i = len - 3; i >= 0; i--) { 
      if (j == 2) { 
       aux2 += milSep; 
       j = 0; 
      } 
      aux2 += aux.charAt(i); 
      j++; 
     } 
     fld.value = ''; 
     len2 = aux2.length; 
     for (i = len2 - 1; i >= 0; i--) 
      fld.value += aux2.charAt(i); 
     fld.value += decSep + aux.substr(len - 2, len); 
    } 
    if (len > 4 && len < 9) { 
     aux2 = ''; 
     for (j = 0, i = len - 3; i >= 0; i--) { 
      if (j == 2 && i <= len -5) { 
       aux2 += milSep; 
       j = 0; 
      } 
      aux2 += aux.charAt(i); 
      j++; 
     } 
     fld.value = ''; 
     len2 = aux2.length; 
     for (i = len2 - 1; i >= 0; i--) 
      fld.value += aux2.charAt(i); 
     fld.value += aux.substr(len - 2, len); 
    } 
    return false; 
   } 
  </script> 
 </head> 
 <body> 
  <form> 
  Introduzca un número:  
  <input type="text" name="test" length="15" onKeyPress="return(currencyFormat(this,'/','/',event))"> 
  </form> 
 </body> 
</html>

Lo único que faltaria sería controlar si se pone más de 28 en febrero, o más de 29 si es bisiesto, pero weno, tampoco vamos a pasarnos

Gracias a todos por vuestro tiempo

JuJoGuAl · #6 (**permalink**) 15/03/2010, 06:23

Gracias Este post es de MUCHA ayuda para mi....

supersiana · #7 (**permalink**) 20/01/2015, 12:20

Sé que es un tema viejo, pero por si alguno llega "buscando" vía Google, ahora tenemos con HTML5 la opción de usar el tipo "DATE" para que los navegadores nos muestren un cuadro tipo calendario desde donde marcar la fecha que estamos buscando.

Si lo que queremos es limitar el uso de fechas lo logramos con código como este:

Código:

<html>
<head>
<title>Ejemplo de validación de fechas</title>
</head>
<body>
<form method="POST" action="">
  Ingresa una fecha antes de 01-01-1980:
  <input type="date" name="iniciocontrato" max="1979-12-31"><br>
  Ingresa una fecha posterior al 01-01-2000:
  <input type="date" name="fincontrato" min="2000-01-02"><br>
</form>
</body>
</html>

Del mismo modo, existe el tipo "PASSWORD" para el acceso de información sensible para que ojos no autorizados no vean lo que se ingresa:

Código:

<html>
<head>
<title>Ejemplo de ingreso de claves</title>
</head>
<body>
<form method="POST" action="">
Ingrese su nombre:<br>
<input type="text" name="usuario">
<br>
Ingrese su clave:<br>
<input type="password" name="clave">
</form>
</body>
</html>

JuJoGuAl · #8 (**permalink**) 20/01/2015, 14:47

Cita:

Iniciado por supersiana

Sé que es un tema viejo, pero por si alguno llega "buscando" vía Google, ahora tenemos con HTML5 la opción de usar el tipo "DATE" para que los navegadores nos muestren un cuadro tipo calendario desde donde marcar la fecha que estamos buscando.

Si lo que queremos es limitar el uso de fechas lo logramos con código como este:

Código:

<html>
<head>
<title>Ejemplo de validación de fechas</title>
</head>
<body>
<form method="POST" action="">
  Ingresa una fecha antes de 01-01-1980:
  <input type="date" name="iniciocontrato" max="1979-12-31"><br>
  Ingresa una fecha posterior al 01-01-2000:
  <input type="date" name="fincontrato" min="2000-01-02"><br>
</form>
</body>
</html>

Del mismo modo, existe el tipo "PASSWORD" para el acceso de información sensible para que ojos no autorizados no vean lo que se ingresa:

Código:

<html>
<head>
<title>Ejemplo de ingreso de claves</title>
</head>
<body>
<form method="POST" action="">
Ingrese su nombre:<br>
<input type="text" name="usuario">
<br>
Ingrese su clave:<br>
<input type="password" name="clave">
</form>
</body>
</html>

En efecto es viejo por la fecha no exisitian metodos que resolvieran dicho problema, tu aporte es bueno pero sabiendo que no todos los navegadores son compatibles con html5 (ciertas versiones de navegadores).

Yo recomiendo usar Jquery o Java en su efecto para el problema por si un usuario ejecuta la aplicación en un Navegador obsoleto