image
Inicio » Foros » JavaScript

JavaScript

perder foco y autotab

Volver al foro | Responder | Añadir nuevo tema


De: Juan Miguel
Fecha: 26/01/2007
Mensaje:

Los explicado en los dos parrafos siguientes se hace de manera dinámica en la misma instrucción por medio de un For:

Estoy generando tantos input como se especifica en otro input; lo que necesito saber es como capturar el nombre de los input creados (uno a uno) al momento de perder ellos el foco, necesito saber en qué input estoy para validar si esta lleno o no, y si no, colocar el foco al input anterior, pero hasta ahora no lo he logrado porque no sé cómo referirme a dichos input.

También tengo una función que tabula automáticamente al completarse tantos caracteres como se especifica y que de hecho funciona en input creados no dinamicamente, pero cuando son dinámicamente creados, no tabula; Será que la forma como se crearon estos input (en tiempo de ejecución) tiene algo que ver con que funcione o no la función autotab?

Gracias por sus sugerencias!!!!

JMC




Quizás le interese
De: ZeroKilled
Util para: 6 personas

Fecha: 26/01/2007
Mensaje:

la validacion se realiza cuando pierda el foco, por tanto vas a utilizar el evento onblur. a ese evento le asignas una funcion que seria la validacion en si. entonces, como se identifica cada input cuando dicha funcion se ejecuta? puedes crear la funcion pidiendo un argumento tal como el mismo input:

<input type='text' ... onblur='validate(this);' />

function validate(input){
if(!input.value)return alert('campo vacio o invalido');
// el resto del codigo;
}

el evento onblur tienes que agregarlo a todos los input's a validar, esto no es problema porque puedes hacerlo dinamicamente mientras vas creando los input's.

ahora, la parte que no logro comprender es la tabulacion automatica. a que exactamente tu te refieres con eso? tabular de calcular o tabular de moverse de un campo a otro?



De: Juan Miguel
Util para: 4 personas

Fecha: 26/01/2007
Mensaje:

Cuando digo autotab me refiero a moverme entre los input como si estuviera utilizando la tecla Tab





De: Juan Miguel
Util para: 0 personas

Fecha: 26/01/2007
Mensaje:

Zerokilled, Cómo hago para colocar el foco en el input vacio??, pues el foco queda después de dar Tab en el siguiente campo

                   document.form.   ????   .focus();






De: ZeroKilled
Util para: 5 personas

Fecha: 27/01/2007
Mensaje:

por lo que estoy entendiendo y de forma resumida, lo que usted quiere hacer es si un campo esta vacio devuelve el foco a ese mismo campo. una vez el campo tenga la informacion necesaria automaticamente poner el foco en el siguiente campo. eventualmente hay que trabajar con dos eventos por separados: onblur y onkeyup. el onblur es el mas sencillo y como antes habia citado, simplemente tienes que escribir el codigo necesario dentro de la funcion que validará a dicho campo:

<input type='text' ... onblur='isEmpty(this);' />

function isEmpty(input){
if(input.value)return false; //si el campo no esta vacio, salir de la funcion;
input.focus();
alert('Introduzca el contenido necesario');
}

la comoplejidad autotabulacion va a depender de como tu organices la informacion para tener acceso a cada uno de los elementos. para cuando se trata de elementos dinamicos, una de las formas mas sencilla es utilizar un identificador compuesto por un nombre seguido de un numero, en el siguiente ejemplo fijese en el patron de los name's. esta parte tambien podemos hacerla dinamicamente utilizando el contador del bucle for:

<input ... name='campo0' />
<input ... name='campo1' />
...
<input ... name='campo8' />
<input ... name='campo9' />

a cada campo se le va agregar el evento onkeyup la cual nos ayudara a comprobar cuando el usuario a entrado la informacion suficiente, y por cierto, utilizando el name para moverse de un campo a otro. suponiendo que el limite de caracter por campo son quince, fijate como esta funcion hace uso de los atributos maxlength y name para poder operar:

<input ... onkeyup='toNextField(this);' maxlength='15' name='campo0' />

function toNextField(input){
if(input.length < input.maxLength)return false;
// si el largo de caracteres no llega a su maximo, la funcion se detiene;
var nextField = 'campo' + (parseInt(input.name) + 1);
// parseInt para extrear el numero y sumarle uno, de aqui la idea de tener un patron en los name's para poder identificar el proximo;
if(!input.form.elements[nextField])return false;
// se comprueba si dicho elemento existe en el formulario, de lo contrario se detiene la funcion. esto es util para que no devuelva error cuando llega al ultimo campo;
input.form.elements[nextField].focus();
}

por ultimo, recuerda que estos dos eventos los puedes agregar al input dinamicamente mientras se crean. y segundo, no he comprobado este codigo, pero estoy casi seguro que no tiene errores.



De: ZeroKilled
Util para: 0 personas

Fecha: 27/01/2007
Mensaje:

por lo que estoy entendiendo y de forma resumida, lo que usted quiere hacer es si un campo esta vacio devuelve el foco a ese mismo campo. una vez el campo tenga la informacion necesaria automaticamente poner el foco en el siguiente campo. eventualmente hay que trabajar con dos eventos por separados: onblur y onkeyup. el onblur es el mas sencillo y como antes habia citado, simplemente tienes que escribir el codigo necesario dentro de la funcion que validará a dicho campo:

<input type='text' ... onblur='isEmpty(this);' />

function isEmpty(input){
if(input.value)return false; //si el campo no esta vacio, salir de la funcion;
input.focus();
alert('Introduzca el contenido necesario');
}

la comoplejidad autotabulacion va a depender de como tu organices la informacion para tener acceso a cada uno de los elementos. para cuando se trata de elementos dinamicos, una de las formas mas sencilla es utilizar un identificador compuesto por un nombre seguido de un numero, en el siguiente ejemplo fijese en el patron de los name's. esta parte tambien podemos hacerla dinamicamente utilizando el contador del bucle for:

<input ... name='campo0' />
<input ... name='campo1' />
...
<input ... name='campo8' />
<input ... name='campo9' />

a cada campo se le va agregar el evento onkeyup la cual nos ayudara a comprobar cuando el usuario a entrado la informacion suficiente, y por cierto, utilizando el name para moverse de un campo a otro. suponiendo que el limite de caracter por campo son quince, fijate como esta funcion hace uso de los atributos maxlength y name para poder operar:

<input ... onkeyup='toNextField(this);' maxlength='15' name='campo0' />

function toNextField(input){
if(input.length < input.maxLength)return false;
// si el largo de caracteres no llega a su maximo, la funcion se detiene;
var nextField = 'campo' + (parseInt(input.name) + 1);
// parseInt para extrear el numero y sumarle uno, de aqui la idea de tener un patron en los name's para poder identificar el proximo;
if(!input.form.elements[nextField])return false;
// se comprueba si dicho elemento existe en el formulario, de lo contrario se detiene la funcion. esto es util para que no devuelva error cuando llega al ultimo campo;
input.form.elements[nextField].focus();
}

por ultimo, recuerda que estos dos eventos los puedes agregar al input dinamicamente mientras se crean. y segundo, no he comprobado este codigo, pero estoy casi seguro que no tiene errores.



De: Juan
Util para: 0 personas

Fecha: 29/01/2007
Mensaje:

No entiendo por qué cuando sale del input en que especifico la cantidad de inputs a crear dinámicamente, el evento onBlur se dispara (el que esta en los input recien creados con el For) siendo que en donde especifico dicha
cantidad, no lo estoy utilizando?? - Esto no debería suceder al momento de dar Tab en los input recien creados??

Otra cosa que pasa es que si no digito nada en el campo donde estoy, entra a la función (isEmpty(this);) pero el foco no queda en donde estaba (en el campo vacio) sino que pasa normalmente al input siguiente permitiendome seguir adelante dejando campos vacios.

Tampoco me funcionó la función (toNextField(this);), no pasa al siguiente campo al llegar al maxlength que tiene definido, estuve revisando con un alert el contenido de input.length en esta función y me aperece en Undefined, que sera??.





De: Juan
Util para: 0 personas

Fecha: 29/01/2007
Mensaje:

Entendió bien ZeroKill!!!, lo que quiero hacer es que si un campo esta vacío devolverle el foco a ese mismo campo. y una vez el campo tenga la información necesaria automáticamente poner el foco en el siguiente campo, eso lo hago con la función “isEmpty(this)” que funciona perfectamente pero sólo para el último campo, para los demás es como si estuviera entrando 2 veces a la función, como si sucediera 2 veces el evento onBlur, cuando este se pierde sólo una vez cierto??

 

Por otra parte, la función que me dijo:

 

function toNextField(input){
if(input.length < input.maxLength)return false;
var nextField = 'campo' + (parseInt(input.name) + 1);
if(!input.form.elements[nextField])return false;
input.form.elements[nextField].focus();
}

...tuve que acomodarla así debido a que parseInt(,) no funcionaba correctamente:

 

if(input.length < input.maxLength){

         return false;

}else{

         ***********************************

var x = input.name;

         x = "PaqAdj" + (parseInt(x.slice (6,3)) + 1);

         var siguiente = "PaqAdj" + x;

***********************************

         if(!input.form.elements[nextField]){

                  return false;

         }else{

                  input.form.elements[nextField].focus();

         }

}

 

el problema acá es que aún no consigo que al completarse el maxlength del campo se pase al siguiente.

 

...Tal vez estoy molestando mucho ya pero es que  necesito que funcione correctamente esto.

 

Por su ayuda, GRACIAS!!!.

 





De: ZeroKilled
Util para: 0 personas

Fecha: 30/01/2007
Mensaje:

encontre cual era el problema con mi funcion toNextField. aparte del parseInt, sucedia que queria comprobar el largo de los caracteres y lo estaba haciendo incorrectamente, se supone que fuera input.value.length. el error del parseInt, yo pensaba que la funcion buscaba en la cadena si existia algun numero, pero ya veo que me equivoque. de todos modos esta vez utilice expresiones regulares:

function toNextField(input){ //onkeyup
if(input.value.length < input.maxLength)return input.focus();
var nextField = 'campo' + (Number(input.name.match(/d+/)) + 1);
if(!input.form.elements[nextField])return false;
input.form.elements[nextField].focus();
}

en cuanto a la funcion isEmpty, en mi opinion yo me olvidaria de esa funcion. por que? el codigo que habia provisto tiene el efecto de recurrir indefinidamente y es notable en ie/win:

function isEmpty(input){ //onblur
if(input.value.length != input.maxLength)input.focus();
}

me explico. cuando el foco cambia de campo ocurre el evento onblur y este llama a la funcion devolviendo el foco al input que disparo el evento. sucede que si el foco se posiciona en otro campo éste va a perder el foco debido al evento disparado anteriormente causando asi que vuelva a dispararse el evento onblur por este segundo campo. y asi continua en ese va y ven. por lo menos esto me sucede en ie/win, en firefox parece que tiene proteccion contra ese tipo de codigo. el codigo anterior provoca lo antes mencionado, lo he puesto para que tu lo puedas comprobar. si lo vas a comprobar, antes asegurate de tener algun modo efectivo de cerrar el navegador ya que el navegador congela toda las peticiones del usuario. por ejemplo, puedes utilizar el task manager de windows presionando las teclas CTRL + ALT + DELETE.

lamento no poderte ayudar mucho en esta parte porque en verdad no tengo un conocimiento extenso sobre los eventos.



De: 123
Util para: 0 personas

Fecha: 04/09/2010
Mensaje:

hhhhhh



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.