funcion que simule la tecla tab

caberto · #1 (**permalink**) 22/07/2007, 12:20

saludos....
me gustaria que me ayudaran....
existe una forma de hacer que una funcion de javascript haga el proceso de la tecla tab, es decir, que cuando se genere un evento se dispare una instruccion que haga la funcion de la tecla tab

gracias

derkenuke · #2 (**permalink**) 22/07/2007, 15:35

Creo que por seguridad no puedes hacer que una tecla se "pulse" mediante javascript, lo que sí se puede hacer es simularlo.

Es decir, si tab se encarga de dar el foco al campo que tiene el tabindex actual + 1 eso es fácil de hacer con javascript. Buscamos el siguiente campo, y le damos el foco, con eso ya simularíamos la tecla tab.

Especifica un poco lo que quieres, tiene pinta de que se puede hacer.

Un saludo.

caberto · #3 (**permalink**) 22/07/2007, 19:55

derkenuke .... te explico lo que me pasa
estoy usando esta rutina que tome prestada de este foro
se llama "currencyFormat"

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Rutina para sumar Numeros</title> 
<script languaje = "Javascript"> 
function formato_PC(n, sepMil, sepDec) {debugger; 
if(sepMil == "."){ 
    return Number( n.replace(/./g,"").replace(/,/g,sepMil) ); 
    var numero = Number.value} 
else{ 
    return Number( n.replace(/./g,sepDec).replace(/,/g,"") ); 
    var numero = Number.value} 
}  
function formato_HUM(n, sepMil, sepDec, Decimales) { 
       n=n.toFixed(2);//el 2 equivale a la cantidad de decimales que se desee 
    n=String(n).split(".");          
    n[0]=n[0].split("").reverse().join("");     
        if(sepMil == "."){  
               n[0]=n[0].replace(/(d{3})(?=d)/g,"$1" + sepMil);  
        }else{ 
            n[0]=n[0].replace(/(d{3})(?=d)/g,"$1" + sepDec);  
        } 
        n[0]=n[0].split("").reverse().join("");         
        if(sepMil == "."){ 
               return n.join(",");} 
        else{ 
            n[0]=n[0].replace(/./g,","); 
        return n.join(".");}          
        }  
//cuando se realizen los cambios de separadores deben tener el mismo orden  
function suma(arr) {  
    var total=0;  
    for(var r=0;r<arr.length;r++)  
        total+=formato_PC(arr[r],document.formulario.Sep_1.value,document.formulario.Sep_2.value); //cambiar aqui el orden de los separadores  
    return formato_HUM(total,document.formulario.Sep_1.value,document.formulario.Sep_2.value,2); //cambiar aqui el orden de los separadores 
}   
 
function sumaTodos() { 
   
    var arr=new Array();  
    for(var a=1; a<=4; a++) {  
        arr[arr.length]=document.getElementById("caja"+a).value;//en "caja"+a va el nombre del los campos a sumar 
    } 
    document.getElementById("resultado").value=suma(arr); // "Resultado" es el campo a colocar el resultado de la suma 
}  
function currencyFormat(fld, milSep, decSep, e) {debugger; 
    var sep = 0; //variable 
    var key = ''; //variable 
    var i = j = 0; //variable 
    var len = len2 = 0; //variable 
    var strCheck = '0123456789'; //variable 
    var aux = aux2 = ''; //variable 
    var whichCode = (window.Event) ? e.which : e.keyCode; //variable 
    if (whichCode == 13) return true; //Condicional  
    key = String.fromCharCode(whichCode);   
    if (strCheck.indexOf(key) == -1) return false;  //Condicional  
    len = fld.value.length;  
    for(i = 0; i < len; i++) // 
     if ((fld.value.charAt(i) != '0') && (fld.value.charAt(i) != decSep)) break; //Condicional  
    aux = '';  
    for(; i < len; i++)  
     if (strCheck.indexOf(fld.value.charAt(i))!=-1) aux += fld.value.charAt(i); //Condicional  
    aux += key;  
    len = aux.length;  
    if (len == 0) fld.value = ''; //Condicional  
    if (len == 1) fld.value = '0'+ decSep + '0' + aux; //Condicional  
    if (len == 2) fld.value = '0'+ decSep + aux; //Condicional  
    if (len > 2) { //Condicional  
     aux2 = '';  
     for (j = 0, i = len - 3; i >= 0; i--) {  
      if (j == 3) { //Condicional  
       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;  
   }  
      function cuenta(){  
    document.formulario.Valor.value = document.formulario.Sep_1.value;  
   }  
</script>  
</head>  
 
<body>  
  <form name="formulario">  
Sep Miles:<input type ="text" id="Sep_1" size="5" value="," disabled="disabled" /> 
<br /> 
Sep Decimales:<input type ="text" id="Sep_2" size="5" value="." disabled="disabled"/> 
<br /> 
 
Numero<input type="text" id="caja1" size="30" onKeyPress="return(currencyFormat(this,document.formulario.Sep_1.value,document.formulario.Sep_2.value,event))"><br />  
Numero<input type="text" id="caja2" size="30" onKeyPress="return(currencyFormat(this,document.formulario.Sep_1.value,document.formulario.Sep_2.value,event))"><br />  
Numero<input type="text" id="caja3" size="30" onKeyPress="return(currencyFormat(this,document.formulario.Sep_1.value,document.formulario.Sep_2.value,event))"><br />  
Numero<input type="text" id="caja4" size="30" onKeyPress="return(currencyFormat(this,document.formulario.Sep_1.value,document.formulario.Sep_2.value,event))"><br />  
<input type="button" value="Resultado: " onclick="sumaTodos()" /> <input type="text" id="resultado" size="30">  
</form> 
</body>  
</html>

la uso para poner separadores de miles y decimales mientras escribo cantidades,
al comenzar la funcion en una variable llamada "whichCode" coloco el keycode de la tecla que he pulsado por lo tanto se si es un numero, si no es un numero la funcion no entra en el proceso de poner los separadores....
el problema es que en netscape(este problema no lo tengo en IE y tampoco en FIREFOX) la tecla TAB e incluso las teclas BACK y INTRO tienen un keycode y la funcion no los toma como numero por lo tanto las invalida, o mejor dicho, no las toma encuenta.

como podria solucionar ese problema por que necesito que funcione la tecla TAB

caberto · #4 (**permalink**) 22/07/2007, 20:02

derkenuke...
por cierto tambien estan unas funcion que vos sos el creador

gracias saludos

derkenuke · #5 (**permalink**) 23/07/2007, 04:54

Sí, recuerdo esas funciones para formatear números

Bueno, lo que tienes que hacer es averiguar los keycode que son válidos (enter, tab, back...) y dejar que pasen la condicional que restringe, devolviendo true.

Si te fijas, hay una línea que dice así:

Código PHP:

  if (whichCode == 13) return true; //Condicional

El 13 simboliza el enter. Significa que si se ha pulsado enter, salga de la función con un true que indica que la tecla pulsada es válida, y tiene que ejecutarse su efecto.

Deberíamos hacer lo mismo con todas las teclas que desees que funcionen.

Por otra parte, me doy cuenta que también existe:

Código PHP:

  if (strCheck.indexOf(key) == -1) return false;  //Condicional

Siendo strCheck la variable con todos los caracteres válidos que pueden ser tecleados, pero no podríamos meter ahí el enter ni la tabulación supongo. (igual se puede hacer \t y \n\r, no lo he probado).

Con eso debería solucionarse.

Un saludo.

caberto · #6 (**permalink**) 23/07/2007, 13:48

derkenuke....

me he averiguado los keycode de el TAB(0) y el BACK(8)
asi que modifique de esta forma:

Código PHP:

  if (whichCode == 13 || whichCode == 0 || whichCode == 8) return true; //Condicional

pero no las activa por lo menos no en netscape, si en firefox y en IE

esta bien las condicional????
de que otra manera podriamos hacerlo???

gracias y saludos

derkenuke · #7 (**permalink**) 23/07/2007, 19:10

Efectivamente son 0 y 8 al parecer.. por lo menos eso me alertaba FF.

Respecto a netscape no lo sé, ya muy poca gente utiliza ese navegador, creo que es más minoritario que Opera.

Como opción es no hacer nada en caso de que sea netscape (se puede detectar todavía con document.layers?) y en el resto de navegadores trabajar...

¿Te da ese mismo whichCode en netscape?

caberto · #8 (**permalink**) 26/07/2007, 13:58

derkenuke...
he descargado Opera por la recomendacion que me has dado de igual forma te comento...
para firefox el keycode va a ser 0 cuando se pulse por ejemplo las siguientes teclas.. Tab, F1, F2, F3, F4, F5 .....
Insert, Delete, Inicio, Fin y algun otras mas

para opera sera 0 cuando se pulse
F1, F2, F3, F4...
pero la tecla Tab tendra como keycode 8

ahora como podria hacer por lo menos dos procesos para que de acuerdo al navegador haga lo que tiene que hacer???
es decir, puedo yo saber cual es el navegador desde donde el usuario esta viendo mi web?? para asi yo ver cual es el proceso que debo aplicar???

saludos...

derkenuke · #9 (**permalink**) 26/07/2007, 14:58

Sí, puedes saber el nombre del navegador... creo que era navigator.appName, pero esas cosas ya están un poco desfasadas, y su uso no es recomendable.

Lo más normal (ejemplo inútil y desfasado, con el método estándar getElementById es suficiente) es hacer cosas del tipo:

Código PHP:

  if( document.all )
capa = document.all["capa"];
else if( document.getElementById ) 
capa = document.getElementById("capa");
else if( document.layers )
capa = document.layers["capa"];
//operamos con capa

Es decir, dar por sentado que un navegador, por tener un nombre determinado va a usar document.all, otro layers...

En fin, todo esto no sé si te interesa, está bien saberlo pero para este ejemplo llenar el if con condiciones concatenadas con OR (||) es, yo creo, suficiente y válido (a no ser que quieras controlar el f1, f2...).

Si te interesa más el tema hay mucho material para diferenciar un navegador de otro con javascript, pero casi te puedo asegurar que es todo tan inútil y desfasado como el que te he puesto de ejemplo. Lo normal es intentar hacer el código lo más estándar y común para todos los navegadores posible.

Un saludo.