Foros del Web » Programando para Internet » Javascript »

Modificacion de un scrip de tunait: mascara de entrada en un textarea

Estas en el tema de Modificacion de un scrip de tunait: mascara de entrada en un textarea en el foro de Javascript en Foros del Web. Generalmente ando por los foros de html y php, pero esta vez necesito una ayudita con javascript . Tengo el siguiente code que tome de ...
  #1 (permalink)  
Antiguo 22/05/2006, 14:56
 
Fecha de Ingreso: diciembre-2001
Ubicación: Mar del Plata
Mensajes: 203
Antigüedad: 22 años, 4 meses
Puntos: 0
Modificacion de un scrip de tunait: mascara de entrada en un textarea

Generalmente ando por los foros de html y php, pero esta vez necesito una ayudita con javascript .

Tengo el siguiente code que tome de la pagina de Tunait (Gracias por todo lo que me hace aprender !!!:

Código HTML:
[CODE]<html>
<head>
<title>ejemplo</title>
</head>
<script type="text/javascript">
/**************************************************************
Máscara de entrada. Script creado por Tunait! (21/12/2004)
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a distribuír el código en sitios de script sin previa autorización
Si quieres distribuírlo, por favor, contacta conmigo.
Ver condiciones de uso en http://javascript.tunait.com/
[email protected] 
****************************************************************/
var patron = new Array(2,2,2)
function mascara(d,sep,pat,nums){
if(d.valant != d.value){
	val = d.value
	largo = val.length
	val = val.split(sep)
	val2 = ''
	for(r=0;r<val.length;r++){
		val2 += val[r]	
	}
	if(nums){
		for(z=0;z<val2.length;z++){
			if(isNaN(val2.charAt(z))){
				letra = new RegExp(val2.charAt(z),"g")
				val2 = val2.replace(letra,"")
			}
		}
	}
	val = ''
	val3 = new Array()
	for(s=0; s<pat.length; s++){
		val3[s] = val2.substring(0,pat[s])
		val2 = val2.substr(pat[s])
	}
	for(q=0;q<val3.length; q++){
		if(q ==0){
			val = val3[q]
		}
		else{
			if(val3[q] != ""){
				val += sep + val3[q]
				}
		}
	}
	d.value = val
	d.valant = val
	}
}
</script>
	  
<body>
<input name = "fecha" type="text" onkeyup="mascara(this,':',patron,true)" size="8" maxlength="8" />
</body>
</html>[/CODE]
Modificado un poquillo para trabajar con valores de hora (12:34:56) HH:MM:SS y funciona requeterebien !!! la funcion que quisiera agregarle es la de PRIMERO: verificar que realmente los valores sean horas y si por ejemplo se ingresa 12:67:73 indique que los minutos y segundos estan MAL y SEGUNDO: que si solo ingresan 114 o 14 me lo complete a 00:01:14 o 00:00:14. Espero me puedan ayudar u orientar. Gracias !!!
__________________
:) Fernando Dichiera (:
[email protected]
  #2 (permalink)  
Antiguo 23/05/2006, 02:50
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Hola fermdp

Hum.. para esas modificaciones casi que mejor hacer algo desde cero. Seguramente serán menos líneas que si se adapta este.

Cuando tenga un ratito me pondré a ver si saco algo (o si alguien que lea esto se anima, pues estupendo )

Un saludo
  #3 (permalink)  
Antiguo 23/05/2006, 08:50
 
Fecha de Ingreso: diciembre-2001
Ubicación: Mar del Plata
Mensajes: 203
Antigüedad: 22 años, 4 meses
Puntos: 0
Eres muy amable pues lo necesito para dos campos de texto que entre si se resten campo1 - campo2 y el resultado este en campo 3 !!! - Esto de Javascript es muy interesante y potente !!!
__________________
:) Fernando Dichiera (:
[email protected]
  #4 (permalink)  
Antiguo 23/05/2006, 10:11
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Cita:
Iniciado por fermdp
Eres muy amable pues lo necesito para dos campos de texto que entre si se resten campo1 - campo2 y el resultado este en campo 3 !!! - Esto de Javascript es muy interesante y potente !!!
ahora me perdí ¿que se resten?
  #5 (permalink)  
Antiguo 23/05/2006, 10:53
 
Fecha de Ingreso: diciembre-2001
Ubicación: Mar del Plata
Mensajes: 203
Antigüedad: 22 años, 4 meses
Puntos: 0
Si, pues la aplicacion que tengo que lograr es la siguiente tres campos de texto, en los dos primeros, se ingresan valores del tipo 00:01:14 (Es decir valores de horas, minutos y segundos unicamente, si ponen 00:62:72 Avisaria de la no valides del dato pues no son horas validas y en el tercer campo si campo1 es menor que campo2 mostraria el resultado de la operacion sin tener que usar boton alguno pues es parte de un form que ademas pide mas datos... seria algo parecido a esto...

Campo1: 01:34:21
Campo2: 01:36:28
Campo3: 00:02:07

Es decir una "calculadora" de tiempo a medida que el usuario ingresa los datos pero que tenga la mascara ":" y agrege los ceros para que el usuario solo entre "13421" y quede 01:34:21

El Scrip de la operacion matematica lo tengo pero no se como aplicarle el scrip tuyo de la mascara ":" y tampoco se como hacer para completarlo con ceros si Campo1 no los tubiera.
Espero haberme expresado bien. Nuevamente reitero las gracias por ayudarme tamto y principalmente quiero con este scrip que necesito aprender algo mas para entender y disfrutar del poder de javascrip. Mirando tus ejemplo aprendi y comprendo algo dell codigo y eso me entusiasma !!! Eres muy amable !!!

Todo esto lo estoy tratando de hacer usando, modificando y liando con tu scrip y en el siguiente:

Código PHP:
<html><head><script language="JavaScript"

   function 
padNmb(nStrnLen){ 
    var 
sRes String(nStr); 
    var 
sCeros "0000000000"
    return 
sCeros.substr(0nLen sRes.length) + sRes
   } 

   function 
stringToSeconds(tiempo){ 
    var 
sep1 tiempo.indexOf(":"); 
    var 
sep2 tiempo.lastIndexOf(":"); 
    var 
hor tiempo.substr(0sep1); 
    var 
min tiempo.substr(sep1 1sep2 sep1 1); 
    var 
sec tiempo.substr(sep2 1); 
    return (
Number(sec) + (Number(min) * 60) + (Number(hor) * 3600)); 
   } 

   function 
secondsToTime(secs){ 
    var 
hor Math.floor(secs 3600); 
    var 
min Math.floor((secs - (hor 3600)) / 60); 
    var 
sec secs - (hor 3600) - (min 60); 
    return 
padNmb(hor2) + ":" padNmb(min2) + ":" padNmb(sec2); 
   } 

   function 
substractTimes(t1t2){ 
    var 
secs1 stringToSeconds(t1); 
    var 
secs2 stringToSeconds(t2); 
    var 
secsDif secs1 secs2
    return 
secondsToTime(secsDif); 
   } 

   function 
calcT3(){ 
    
with (document.frm
     
t3.value substractTimes(t2.valuet1.value); 
   } 

  
</script> 
 </head> 
 <body onLoad="calcT3();"> 
  <form name="frm"> 
   Hora1 (hh:mm:ss): <input name="t1" type="text" onChange="calcT3()" onClick="calcT3()" value="00:00:00" maxlength="8"><br> 
   Hora2 (hh:mm:ss): <input name="t2" type="text" onChange="calcT3()" onClick="calcT3()" value="00:00:00" maxlength="8"><br> 
   <hr> 
   Resta (hh:mm:ss): <input type="text" onClick="calcT3()" onFocus="calcT3()" name="t3" value="" maxlength="8" disabled><br><br>
</form></body> </html> 
__________________
:) Fernando Dichiera (:
[email protected]

Última edición por fermdp; 23/05/2006 a las 11:05
  #6 (permalink)  
Antiguo 23/05/2006, 19:54
 
Fecha de Ingreso: diciembre-2001
Ubicación: Mar del Plata
Mensajes: 203
Antigüedad: 22 años, 4 meses
Puntos: 0
Espero se entienda si no me avisan, muy amables por todo !!!
__________________
:) Fernando Dichiera (:
[email protected]
  #7 (permalink)  
Antiguo 26/05/2006, 13:39
 
Fecha de Ingreso: diciembre-2001
Ubicación: Mar del Plata
Mensajes: 203
Antigüedad: 22 años, 4 meses
Puntos: 0
Bueno toy como los locos me contesto solo !!!

Aqui la respuesta aparente a lo que queria hacer !!! Digo aparente porque ANDA pero SUPONGO que se podria hacer con muchas menos lineas de codigo !!!, No se casi nada de javascript pero de tanto ver ejemplo, leer las FAQ's llegue a la "Recopilacion" de unos cuantos script, los fui editando (durante varias horas) hasta que logre que todos los code trabajen como yo queria. Me gustaria que lo vieran y me den concejos de como optimizarlo porque de seguro es un collage infernar de lineas que copy paste mediante recolecte de lugares y autores varios, luego agrego los creditos a quienes corresponda.

Ejemplo.html
Código PHP:
<html>
<
head>
<
script language="JavaScript" src="libreria.js"></script>
<script language="JavaScript" src="validar_fecha.js"></script>
<script language="JavaScript" src="resta_horas.js"></script>
<title>ejemplo </title>
</head>
<body onLoad="calcT3();">
<form name="frm">
TimeCode:<br>
<input name = "t1" type="text" onKeypress="solo_numeros()" onChange="rellenar(this,this.value)" onBlur="mascara(this,':',patron,true); tiempo_mal(this); calcT3()" size="8" maxlength="8"><br>
<input name = "t2" type="text" onKeypress="solo_numeros()" onChange="rellenar(this,this.value)" onBlur="mascara(this,':',patron,true); tiempo_mal(this); calcT3()" size="8" maxlength="8"><br><hr>
<input name = "t3" type="text" onClick="calcT3()" onFocus="calcT3()" onBlur="calcT3()" size="8" maxlength="8">
</form> 
</body>
</html> 
libreria.js
Código PHP:
// Validar Horas, Fechas, llenar con Ceros. Agregar ":" a las horas, agregar "/" a las fechas.
// Horas con formato: 23:59:59 (HH:MM:SS)
// Fechas con formato: 12/12/2006 (DD/MM/AAAA)

function solo_numeros(){ /*** Deja entrar solo numeros ***/
var key=window.event.keyCode;//toma el codigo de tecla.
if (key 48 || key 57){//si no es un numero
window.event.keyCode=0;//anula la entrada de texto.
}}

function 
rellenar(quien,que){ /*** Rellena con ceros a la izquierda el valor ingresado ***/
cadcero='';
for(
i=0;i<(6-que.length);i++){
cadcero+='0';
}
quien.value=cadcero+que;
}

var 
patron = new Array(2,2,2/*** Formato de Hora Para el TimeCode 00:00:00 ***/
var fecha = new Array(2,2,4/*** Formato para la Fecha ***/
function mascara(d,sep,pat,nums){ /*** Agrega el separador indicado ***/
if(d.valant != d.value){
    
val d.value
    largo 
val.length
    val 
val.split(sep)
    
val2 ''
    
for(r=0;r<val.length;r++){
        
val2 += val[r]    
    }
    if(
nums){
        for(
z=0;z<val2.length;z++){
            if(
isNaN(val2.charAt(z))){
                
letra = new RegExp(val2.charAt(z),"g")
                
val2 val2.replace(letra,"")
            }
        }
    }
    
val ''
    
val3 = new Array()
    for(
s=0s<pat.lengths++){
        
val3[s] = val2.substring(0,pat[s])
        
val2 val2.substr(pat[s])
    }
    for(
q=0;q<val3.lengthq++){
        if(
==0){
            
val val3[q]
        }
        else{
            if(
val3[q] != ""){
                
val += sep val3[q]
                }
        }
    }
    
d.value val
    d
.valant val
    
}
}

function 
tiempo_mal(str/*** Avisa que los segundos, minutos y horas ingresadas estan mal ***/
{
hora=str.value
if (hora=='') {return}
a=hora.charAt(0//<=2
b=hora.charAt(1//<4
d=hora.charAt(3//<=5
f=hora.charAt(6//<=5
if (f>5) {alert("El valor que introdujo en los Segundos no corresponde\n ingrese un valor entre 00 y 59");return}
if (
d>5) {alert("El valor que introdujo en los Minutos no corresponde\n ingrese un valor entre 00 y 59");return}
if ((
a==&& b>3) || (a>2)) {alert("El valor que introdujo en la Hora no corresponde\n ingrese un valor entre 00 y 23");return}

resta_horas.js

Código PHP:
   function padNmb(nStrnLen){ 
    var 
sRes String(nStr); 
    var 
sCeros "0000000000"
    return 
sCeros.substr(0nLen sRes.length) + sRes
   } 

   function 
stringToSeconds(tiempo){ 
    var 
sep1 tiempo.indexOf(":"); 
    var 
sep2 tiempo.lastIndexOf(":"); 
    var 
hor tiempo.substr(0sep1); 
    var 
min tiempo.substr(sep1 1sep2 sep1 1); 
    var 
sec tiempo.substr(sep2 1); 
    return (
Number(sec) + (Number(min) * 60) + (Number(hor) * 3600)); 
   } 

   function 
secondsToTime(secs){ 
    var 
hor Math.floor(secs 3600); 
    var 
min Math.floor((secs - (hor 3600)) / 60); 
    var 
sec secs - (hor 3600) - (min 60); 
    return 
padNmb(hor2) + ":" padNmb(min2) + ":" padNmb(sec2); 
   } 

   function 
substractTimes(t1t2){ 
    var 
secs1 stringToSeconds(t1); 
    var 
secs2 stringToSeconds(t2); 
    var 
secsDif secs1 secs2
    return 
secondsToTime(secsDif); 
   } 

   function 
calcT3(){ 
    
with (document.frm
     
t3.value substractTimes(t2.valuet1.value); 
   } 
validar_fecha.js
Código PHP:
   function esDigito(sChr){ 
    var 
sCod sChr.charCodeAt(0); 
    return ((
sCod 47) && (sCod 58)); 
   } 

   function 
valSep(oTxt){ 
    var 
bOk false
    var 
sep1 oTxt.value.charAt(2); 
    var 
sep2 oTxt.value.charAt(5); 
    
bOk bOk || ((sep1 == "-") && (sep2 == "-")); 
    
bOk bOk || ((sep1 == "/") && (sep2 == "/")); 
    return 
bOk
   } 

   function 
finMes(oTxt){ 
    var 
nMes parseInt(oTxt.value.substr(32), 10); 
    var 
nAno parseInt(oTxt.value.substr(6), 10); 
    var 
nRes 0
    switch (
nMes){ 
     case 
1nRes 31; break; 
     case 
2nRes 28; break; 
     case 
3nRes 31; break; 
     case 
4nRes 30; break; 
     case 
5nRes 31; break; 
     case 
6nRes 30; break; 
     case 
7nRes 31; break; 
     case 
8nRes 31; break; 
     case 
9nRes 30; break; 
     case 
10nRes 31; break; 
     case 
11nRes 30; break; 
     case 
12nRes 31; break; 
    } 
    return 
nRes + (((nMes == 2) && (nAno 4) == 0)? 10); 
   } 

   function 
valDia(oTxt){ 
    var 
bOk false
    var 
nDia parseInt(oTxt.value.substr(02), 10); 
    
bOk bOk || ((nDia >= 1) && (nDia <= finMes(oTxt))); 
    return 
bOk
   } 

   function 
valMes(oTxt){ 
    var 
bOk false
    var 
nMes parseInt(oTxt.value.substr(32), 10); 
    
bOk bOk || ((nMes >= 1) && (nMes <= 12)); 
    return 
bOk
   } 

   function 
valAno(oTxt){ 
    var 
bOk true
    var 
nAno oTxt.value.substr(6); 
    
bOk bOk && ((nAno.length == 2) || (nAno.length == 4)); 
    if (
bOk){ 
     for (var 
0nAno.lengthi++){ 
      
bOk bOk && esDigito(nAno.charAt(i)); 
     } 
    } 
    return 
bOk
   } 

   function 
valFecha(oTxt){ 
    var 
bOk true
    if (
oTxt.value != ""){ 
     
bOk bOk && (valAno(oTxt)); 
     
bOk bOk && (valMes(oTxt)); 
     
bOk bOk && (valDia(oTxt)); 
     
bOk bOk && (valSep(oTxt)); 
     if (!
bOk){ 
      
alert("Fecha inválida"); 
      
/* oTxt.value = ""; */
      
oTxt.focus(); 
     } 
    } 
   } 
Espero alguien generoso lo pueda verificar y aconsejarme,pues es de lo primerito que hago con javascript !!!
Muy Amables !!!
__________________
:) Fernando Dichiera (:
[email protected]
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




La zona horaria es GMT -6. Ahora son las 05:34.