funcion tabular

[mexbale]

hola a todos

no se si me podrían ayudar con una consulta tengo un formulario para captura con mas de 3000 campos para llenar, y tengo un problema con una función que hace que pase automáticamente al siguiente campo pero el problema es que se tarda mucho tiempo para pasar y la verdad no se que hacer para hacerla mas rapida esta es mi función

Código Javascript:

<script type="text/javascript">
function mostrarTab(obj) {
    rolling=obj.scrollTop;
    if(typeof obj.selectionStart == 'number') {
        // Resto de navegadores
        var start = obj.selectionStart;
        var end = obj.selectionEnd;
        obj.value = obj.value.substring(0, start)+"\t";
        obj.value+= obj.value.substring(start, obj.value.length);
        obj.focus();
        obj.selectionStart =  obj.selectionEnd= end + 2;
    } 
    else if(document.selection) {
        // Internet Explorer
        obj.focus();
        var range = document.selection.createRange();
        if(range.parentElement() != obj) return false;
        if (range.text != "") {
            if(typeof range.text == 'string'){
                document.selection.createRange().text ="\t"+range.text;
            }
            else obj.value += "\t";
        }
        else
            obj.value += "\t";
    }
    obj.scrollTop=rolling;
}
 
 
 
function tabulador(form,field)
{
var next=0, found=false
var f=form
//if(event.keyCode!=13) return;
for(var i=0;i<f.length;i++) {
    if(field.name==f.item(i).name){
        next=i+1;
        found=true
        break;
    }
}
//MODIFICACION A LA FUNCION &&  f.item(next).style.display!='none'
while(found){
    if( f.item(next).disabled==false &&  f.item(next).type!='hidden' &&  f.item(next).style.display!='none'){
        f.item(next).focus();
        break;
    }
    else{
        if(next<f.length-1)
            next=next+1;
        else
            break;
    }
}
}
</script>
 

de antemano les doy las gracias y ojala halla una solución para este problema que tengan una buena tarde

Saludos

[Perr0]

para que corra mas rapido, de acuerdo a mi experiencia

primero hacer una funcion que recorra los campo para llenar y generar un array de datos. Esto va a demorar lo mismo que se te demora, pero solo en el inicio. Por ejemplo (esta hecho a la rapida)

Código Javascript:

var arrayelementos=new Array()
var contador=0;
 
elementos=document.forms[0]
for(i=0;i<elementos.length;i++){
//AQUI VALIDAS LOS DISABLED, READONLY, BUTTON, SUBMIT, ETC
arrayelementos[contador]=elementos.elements[i];
contador++;
}
 

Luego de eso le asignas valores a los eventos onkeydown y de acuerdo al indice del array te posicionas uno mas adelante, hasta llegar al ultimo, le puedes agregar tambien que se devuelva o comienze de cero al llegar al ultimo.

La idea es que te trabaje con el array de objetos identificados y no los recorra una y otra vez, sino que despues de ello compare con array que es mas rapido

salu2 y que te vaya bien

[mexbale]

te doy las gracias pero la verdad soy novato en todo esto si me podrias explicar por que nunca he utilizado los array

de antemano te voy las gracias buena noche

[Perr0]

PROBADO EN IE 7 - IE 8 - FF - OPERA - CHROME

NOTA: funciona en todos bien, salvo que en opera al dejar el enter apretado no tabula automaticamente, sino que hay que presionar para avanzar uno a uno y los checkbox me los marca automaticamente (el resto de los navegadores lo hace con la SPACEBAR)...me dio lata seguir agrandando el codigo, ademas no me gusta opera.


que tal, te hice una demo para que la veas como funciona

se demora en cargar los elementos (3 seg aprox.) pero despues va como avion

http://perr0.netii.net/exs/tabulador/

se le pueden agregar opciones como para que se salte ciertos elementos para que no los tomes y cosas asi.

le puse un efecto de color para que sepas donde esta posicionado

salu2

[mexbale]

ok ya cheque el ejemplo esta muy bien, pero si quiero que cuando llegue al máximo del campo me pase sin apretar enter ni tab como le puedo hacer ?????

de antemano te doy las gracias por toda tu ayuda, buen dia

[Perr0]

Iniciado por mexbale

ok ya cheque el ejemplo esta muy bien, pero si quiero que cuando llegue al máximo del campo me pase sin apretar enter ni tab como le puedo hacer ?????

de antemano te doy las gracias por toda tu ayuda, buen dia

la manera mas simple es atacar aca

antiguo

Código Javascript:

if(a<arrayelementos.length-1){
    newfoco=arrayelementos[a+1];
    newfoco.focus();
}else{
    newfoco=arrayelementos[0];
    newfoco.focus();
}
 

nuevo

Código Javascript:

if(a<arrayelementos.length-1){
    newfoco=arrayelementos[a+1];
    newfoco.focus();
}else{
    //FUNCION A EJECUTAR
    funcionfinaltab();
}
 
funcionfinaltab(){
      //accion que planeas hacer, como un submit, etc...
}
 

salu2

[Perr0]

nueva version
achique el codigo, le quite el evento onclick agragado por un onblur y onfocus para no recorrer tanto el array, esta donde mismo (http://perr0.netii.net/exs/tabulador/), solo que hay que recargar la página nuevamante.

ahora el foco va con clase en vez de estilos y le puedes dar el que tu quieras
eso y suerte

http://perr0.netii.net/exs/tabulador/

salu2

[mexbale]

ya no comprendí el ejemplo, lo que necesito es si tengo muchos campos con capacidad de 2 números y cuando tecleen los dos números que me salte automáticamente al otro campo lo que dices es que nada mas modifique lo que me pusiste en el primer comentario pero lo que no comprendo es donde dice funcionfinaltab()

hay tengo que tener otra función o como ?????

de antemano te voy las gracias buen dia

[Perr0]

lo que coloque anteriormente es para que al llegar al final de los elementos, vaya a una funcion de cualquier nombre (q invente)...pasa una de dos cosas, o no te explicas bien o tengo mi comprension mal...ahora entendi que quieres.

mira te dejo un código y trata de estudiarlo, por mi parte me desconecto hasta nuevo aviso.


http://perr0.netii.net/exs/tabulador...;20ejemplo.htm

todo va en el maxlength que le coloques para que se salte al siguiente



salu2

[Adler]

Hola

O algo mas sencillo

Código Javascript:

<html>
<head>
<script type="text/javascript">
function tabular(evt, obj, tam) {
tecla=(evt) ? evt.keyCode : evt.charCode;
if(tecla==8) { return; } 
var frm=obj.form;
var largo = obj.value.length;
if (largo == tam) {
    for(i=0;i<frm.elements.length;i++) {
        if(frm.elements[i]==obj) {
            if (i==frm.elements.length-1) { i=-1; }
    break;
        }
    }
 
frm.elements[i+1].focus();
return false;
 
}
}
</script>
</head>
<body>
<form>
<input type="text" maxlength="2" onkeypress="return tabular(event, this, this.maxLength)" />
<input type="text" maxlength="2" onkeypress="return tabular(event, this, this.maxLength)" />
<input type="text" maxlength="3" onkeypress="return tabular(event, this, this.maxLength)" />
<input type="text" maxlength="4" onkeypress="return tabular(event, this, this.maxLength)" />
</form>
</body>
</html>
 

Suerte

[Perr0]

Adler, lo que pasa es que si hace ese recorrido para 3000 textbox, se pone muy lento en cada enter, o caracter que ingrese, por ello los arrays.

salu2

[mexbale]

hola perr0 una pregunta ya estudie la función que me pusiste pero tengo estas dos funciones mas para validar los campos

Código Javascript:

<script language="JavaScript" type="text/javascript">
function activaEstado(iden) //funcion para activar los campos
{
var elhtml2 = document.getElementById(iden);
var elhtml = iden;
if(elhtml2.style.display == 'none'){
elhtml2.style.display = 'block';}
else {elhtml2.style.display = 'block';}
}
</script>
<script language="JavaScript" type="text/javascript">
function desactivaEstado(iden) //funcion para desactivar los campos
{
var elhtml2 = document.getElementById(iden);
var elhtml = iden;
 
elhtml2.style.display = 'none';
elhtml2.value="";
}
</script>
 

que me oculta cuando no tiene que pasar al campo que sigue y entonces me manda un error

de antemano te doy las gracias y espero que me puedas ayudar con esta duda

buena tarde

[Perr0]

mexbale, que tal

mira, esa función que te envie se ejecuta postcarga de la página, si por algun motivo haces desaparacer algun textbox cambiando el display tambien desabilitalo y en caso contrario habilitalo, asi:

Código Javascript:

if(elhtml2.style.display == 'none')
{
elhtml2.style.display = 'block';
elhtml2.disabled = false;
}else {
elhtml2.style.display = 'block';
elhtml2.disabled = true;
}
 
//al final ejecutas la funcion
carga()
 

cuando ejecutes la funcion carga() nuevamente, ésta te leera todos los array y si antes habian 400 y ocultaste uno ahora habran 399...osea tienes que aplicarle ante alguna modificacion de un textbox

la funcion carga() la agrege hace poco, la ves en el segundo ejemplo que actualizé ahora
http://perr0.netii.net/exs/tabulador...;20ejemplo.htm


salu2

[mexbale]

a ok entonces tendría que buscar otra opción por que los campos que oculto están es constante movimiento todo depende de la forma que llenen el formulario, otra opción que puedas tener

de antemano te doy las gracias por toda tu ayuda eres muy amable

que tengas una buena tarde suerte

[Adler]

Hola

Iniciado por Perr0

Adler, lo que pasa es que si hace ese recorrido para 3000 textbox, se pone muy lento en cada enter, o caracter que ingrese, por ello los arrays.

salu2

No es mi intención polemizar, pero no estoy tan seguro que el proceso fuese mas lento, aunque sean 3000 campos. A ver si mañana tengo tiempo y monto algo

[Adler]

Hola

Me he tardado mas, pero como lo dicho es deuda

Código Javascript:

window.onload = function() {
var frm=document.form1;
for(var i=0,elementos=frm.elements;i<elementos.length;i++) 
Evento(elementos[i], 'keydown', function(event){tabular(event, this);});
}
 
 
function Evento(elemento,nomevento,funcion) {
    if (elemento.attachEvent) {
        var fnc=function(){
            funcion.call(elemento,window.event);
        }
        elemento.attachEvent('on'+nomevento,fnc);
        return true;
    }
    else  
        if (elemento.addEventListener) {
        elemento.addEventListener(nomevento,funcion,false);
        return true;
        }
        else
        return false;
}
 
 
 
var inicio;
function tabular(evt, obj) {
inicio = new Date();
tecla = (evt) ? evt.keyCode : evt.which;
 
    if(tecla==8) return; 
    else if (tecla==13) tabulaEnter(evt, obj);
    else tabulaLength(evt, obj);
}
 
 
 
 
function tabulaEnter(evt, obj) {
for(var j=0, elementos=document.form1.elements;j<elementos.length;j++) 
 
    if (elementos[j] == obj) {
        if (j == elementos.length-2) j =-1;
        break;
    }
 
/*el campos está disabled o hidden*/
    if ((elementos[j+1].disabled ==true) || (elementos[j+1].type=='hidden')) 
                    tabulaEnter(evt,elementos[j+1]);
 
/*el campo es readOnly */
                else if  (elementos[j+1].readOnly == true )  
                    tabulaEnter(evt,elementos[j+1]);
 
                else
        elementos[j+1].focus();
var final = new Date();
alert('ha tardado: ' +parseInt(final-inicio))
                    return false; 
}
 
 
 
function tabulaLength(evt, obj) {
if (obj.value.length == obj.maxLength) {
tabulaEnter(evt, obj);
}
}
 

lo puedes probar con el HTML de 300 campos que creastes