Foros del Web » Programando para Internet » Javascript »

mascaras para Float, Int y hora

 Estas en el tema de mascaras para Float, Int y hora en el foro de Javascript en Foros del Web. Buenas Amigos, Primero gracias a todos los usuarios, sobre todo a los más expertos, pues ayudan mucho a esa comunidad principiante que como yo intentamos ...
  #1 (permalink)  
Antiguo 30/04/2009, 07:45
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
mascaras para Float, Int y hora
Buenas Amigos,

Primero gracias a todos los usuarios, sobre todo a los más expertos, pues ayudan mucho a esa comunidad principiante que como yo intentamos abrirnos camino en el mundo de la programación

Ya que en este foro he aprendido mucho gracias a la colaboración desinteresada de muchos me gustaría colaborar con él dejando un unas cuantas funciones, supongo que se podrán mejorar pero a mi me han servido para lo que necesitaba. Lo hubiera puesto en las Faq´s pero he visto que estaba cerrado. Son unas funciones que limitan a un formato un input text a la hora de introducir datos en él usando para ello expresiones regulares.
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #2 (permalink)  
Antiguo 30/04/2009, 07:46
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: mascaras para Float, Int y hora
Esta primera es para formato entero

Código javascript: 
Ver original
  1. //////////////////////////////////////////////////
  2. ////////////////// By Matrak /////////////////////
  3. /* Especificacion */
  4. // ob   ->  Objeto input text
  5. // n    ->  Nº máx de digitos de la parte entera
  6.  
  7. //ejemplos de imputs
  8. //
  9. //<input name="digitos" type="text" onkeyup="maskEntero(this,2)" >
  10. //
  11. //////////////////////////////////////////////////
  12.  
  13. function maskEntero(ob,n) {
  14.   /* Solo numeros */
  15.   if (/[^0-9]/.test(ob.value[ob.value.length-1])) ob.value=ob.value.slice(0,ob.value.length-1)
  16.  
  17.   if (ob.value.length>n) {
  18.     ob.value=ob.value.slice(0,ob.value.length-1)
  19.   }
  20. }
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #3 (permalink)  
Antiguo 30/04/2009, 07:47
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: mascaras para Float, Int y hora
Esta segunda es un poco más compleja y es para formato float

Código javascript: 
Ver original
  1. //////////////////////////////////////////////////
  2. ////////////////// By Matrak /////////////////////
  3. /* Especificacion */
  4. // ob   ->  Objeto input text
  5. // n    ->  Nº de digitos de la parte entera
  6. // d    ->  Nº de digitos de la parte flotante
  7. // sin  ->  (true) o (false)
  8. //          -true: quiere decir que podra tener M digitos enteros si no hay parte flotante
  9. //            ej: 99.99% si pero 100% sin decimales porque no vale 100.02%
  10. //          -false: Se comporta que cuando ya hay introducido n digitos y metemos 1 mas pone el '.' entre medio
  11. // M    ->  M digitos sin parte flotante
  12.  
  13. //ejemplos de imputs
  14. //
  15. //<input name="digitos" type="text" onkeyup="maskFloat(this,2,3,true,3,true)">
  16. //
  17. //<input name="digitos" type="text" onkeyup="maskFloat(this,2,3,true,4,false)">
  18. //
  19. //<input name="digitos" type="text" onkeyup="maskFloat(this,2,3,false)">
  20.  
  21. function maskFloat(ob,n,d,sin,M,gen) {
  22.   if (!sin) M=n+1;
  23.  
  24.   if (n>=M) {
  25.     alert("error en la especificación de la funcion: n < M");
  26.     ob.value='';
  27.     return false;
  28.   }
  29.   /* Solo numero y solo un '.' */
  30.   if (/[^0-9\.]/.test(ob.value[ob.value.length-1])) ob.value=ob.value.slice(0,ob.value.length-1)
  31.   else if (/^\./.test(ob.value[ob.value.length-1]) && /\d*\.\d*\./.test(ob.value)) ob.value=ob.value.slice(0,ob.value.length-1)
  32.   
  33.   posDec = ob.value.indexOf(".");
  34.   
  35.   if (/\d*\.\d*/.test(ob.value) && posDec<M){
  36.     if (/^\./.test(ob.value)) ob.value='0.';
  37.     
  38.     numero=ob.value.split('.')
  39.     
  40.     if (numero[1].length>d)
  41.         ob.value=ob.value.slice(0,ob.value.length-1)
  42.   
  43.     return true;
  44.   }else{
  45.     if (sin) {
  46.     
  47.       if (gen){
  48.         /*Caso generico*/
  49.         if (ob.value.length>M) {
  50.           ob.value=ob.value.slice(0,ob.value.length-1)
  51.         }
  52.       }else{
  53.       
  54.         /*Para % este caso (todo que pasa de 100% se queda en 100% y sin decimales)*/
  55.       
  56.         if (ob.value.length==M){
  57.           if (/[^\.]/.test(ob.value[ob.value.length-1]))
  58.             ob.value=100;
  59.         }else if (ob.value.length>M){
  60.             ob.value=100;
  61.         }
  62.       
  63.       /*--------*/
  64.       }
  65.       
  66.     }else {
  67.       if (ob.value.length>n) {
  68.         ob.value=ob.value.slice(0,ob.value.length-1)+'.'+ob.value.slice(ob.value.length-1,ob.value);
  69.       }
  70.     }
  71.   
  72.     return true;
  73.   }
  74.  
  75. }
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #4 (permalink)  
Antiguo 30/04/2009, 07:47
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: mascaras para Float, Int y hora
Y la tercera es para formato hora

Código javascript: 
Ver original
  1. //////////////////////////////////////////////////
  2. ////////////////// By Matrak /////////////////////
  3. /* Especificacion */
  4. // ob           ->  Objeto input text
  5. // ponMascara   ->  true o false, se refiere a si tiene que poner la mascara, se empleará en el evento onfocus
  6. // valida       ->  true o false, se refiere a si tiene que validar, se empleará en el evento onblur
  7. // Formato hh:mm
  8. //
  9. // input ejemplo:
  10. //
  11. // <input name="digitos" type="text" onfocus="mascaraHora(this,true,false)" onblur="mascaraHora(this,false,true)" onkeyup="mascaraHora(this,false,false)" value="">
  12. //
  13.  
  14. function mascaraHora(ob,ponMascara,valida) {
  15.   cursor=ob.selectionStart;
  16.   /* Validacion cuando la caja pierde el foco*/
  17.   if(valida) {
  18.     if (/^(0[1-9]|1\d|2[0-3]):([0-5]\d)/.test(ob.value)) {
  19.       return true;
  20.     }else{
  21.       ob.value='';
  22.       return false;
  23.     }
  24.   }
  25.   /* Pone mascara si la caja esta en blanco */
  26.   if(ponMascara) {
  27.     if (ob.value=='') ob.value='hh:mm';
  28.     ob.setSelectionRange(0,0); 
  29.     return true;
  30.   }
  31.   /* Una vez la hora es correcta no deja añadir mas nada */
  32.   if (ob.value.length>5 && /^(0[1-9]|1\d|2[0-3]):([0-5]\d)/.test(ob.value) && cursor > 5) {
  33.     ob.value=ob.value.slice(0,ob.value.length-1)
  34.     return true;
  35.   }
  36.   /* Procesa los numeros que se van introduciendo */
  37.   if (ob.value.length>5){
  38.     switch (cursor){
  39.     case 1:
  40.       if (/^[012]/.test(ob.value[cursor-1])) {
  41.         if (/^[4-9]/.test(ob.value[cursor+1]) && /^[2]/.test(ob.value[cursor-1])) {
  42.           //alert('siii')
  43.           ob.value=ob.value[cursor]+ob.value.substring(cursor+1,ob.value.length);
  44.           ob.setSelectionRange(cursor-1,cursor-1);
  45.         }else{
  46.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  47.           ob.setSelectionRange(cursor,cursor);
  48.         }
  49.       }else{
  50.         ob.value=ob.value.substring( cursor,ob.value.length)
  51.         ob.setSelectionRange(cursor-1,cursor-1); 
  52.       }
  53.       break; 
  54.     case 2:
  55.       if (/^[2]/.test(ob.value[cursor-2])) {
  56.         if (/^[0-3]/.test(ob.value[cursor-1])) {
  57.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  58.           ob.setSelectionRange(cursor+1,cursor+1); 
  59.         }else{
  60.           ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  61.           ob.setSelectionRange(cursor-1,cursor-1); 
  62.         }
  63.       }else if (/^[01]/.test(ob.value[cursor-2])) {
  64.         if (/^[0-9]/.test(ob.value[cursor-1])) {
  65.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  66.           ob.setSelectionRange(cursor+1,cursor+1); 
  67.         }else{
  68.           ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  69.           ob.setSelectionRange(cursor-1,cursor-1); 
  70.         }
  71.       }else{
  72.         ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  73.         ob.setSelectionRange(cursor-1,cursor-1); 
  74.       }
  75.       break; 
  76.     case 3:
  77.         if (/^:/.test(ob.value[cursor-1])) {
  78.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  79.           ob.setSelectionRange(cursor,cursor); 
  80.         }else{
  81.           ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  82.           ob.setSelectionRange(cursor-1,cursor-1); 
  83.         }
  84.       break;
  85.     case 4:
  86.         if (/^[0-5]/.test(ob.value[cursor-1])) {
  87.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  88.           ob.setSelectionRange(cursor,cursor); 
  89.         }else{
  90.           ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  91.           ob.setSelectionRange(cursor-1,cursor-1); 
  92.         }
  93.       break;
  94.     case 5:
  95.         if (/^[0-9]/.test(ob.value[cursor-1])) {
  96.           ob.value=ob.value.substring(0,cursor)+ob.value.substring(cursor+1,ob.value.length);
  97.           ob.setSelectionRange(cursor,cursor); 
  98.         }else{
  99.           ob.value=ob.value.substring( 0,cursor-1)+ob.value.substring( cursor,ob.value.length)
  100.           ob.setSelectionRange(cursor-1,cursor-1); 
  101.         }
  102.       break; 
  103.     default:
  104.       alert('Error!!!')
  105.       break;
  106.     }
  107.     return true
  108.   }else if(ob.value.length<5){
  109.     ob.value='hh:mm';
  110.     ob.setSelectionRange(0,0); 
  111.   }
  112. }
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #5 (permalink)  
Antiguo 30/04/2009, 07:49
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: mascaras para Float, Int y hora
Como no podía ser de otra manera existen ciertas restricciones para que esto funcione en IE aunque yo me niego a bailarle el agua Microsoft. Prefiero que mis programas no funcionen en él a seguir sirviendo al monopolio. De todas formas para el que no le importe ayudar a MS IE dejo aqui unas funciones que haciendo uso de ellas solucionan el problema


Código javascript: 
Ver original
  1. function posicionCursor()
  2. {
  3.        var tb = document.getElementById("miCuadrodeTexto")
  4.         var cursor = -1;       
  5.         // IE
  6.         if (document.selection && (document.selection != 'undefined'))
  7.         {
  8.             var _range = document.selection.createRange();
  9.             var contador = 0;
  10.             while (_range.move('character', -1))
  11.                 contador++;
  12.             cursor = contador;
  13.         }
  14.        // FF
  15.         else if (tb.selectionStart >= 0)
  16.             cursor = tb.selectionStart;
  17.    
  18.        return cursor;
  19. }
  20. function forzar_focus() {
  21.       // laCaja se refiere al input text
  22.     laCaja.onfocus=null;                            //quito
  23.     laCaja.focus();                                    //hago
  24.     setTimeout("laCaja.onfocus=focus_handler",1);    //pongo (retrasado para IE...)
  25. }
  26.  
  27. function ponCursorEnPos(pos){ 
  28.       // laCaja se refiere al input text
  29.     if(typeof document.selection != 'undefined' && document.selection){        //método IE
  30.         var tex=laCaja.value;
  31.         laCaja.value=''; 
  32.         forzar_focus();            //debería ser focus(), pero nos salta el evento y no queremos
  33.         var str = document.selection.createRange(); 
  34.         laCaja.value=tex;
  35.         str.move("character", pos); 
  36.         str.moveEnd("character", 0); 
  37.         str.select();
  38.     }
  39.     else if(typeof laCaja.selectionStart != 'undefined'){                    //método estándar
  40.         laCaja.setSelectionRange(pos,pos); 
  41.         forzar_focus();            //debería ser focus(), pero nos salta el evento y no queremos
  42.     }
  43. }
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #6 (permalink)  
Antiguo 30/04/2009, 07:50
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: mascaras para Float, Int y hora
Saludos a todos,

Espero sirva de ayuda a alguien
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:28.