Mover automáticamente al siguiente tabindex - Foros del Web

Iniciar Sesión

Estas en el tema de Mover automáticamente al siguiente tabindex en el foro de Javascript en Foros del Web. Buenas tardes: Tengo este código resultante de una página ASP Cita: <html> <head> <title></title> <link href="setup/css/basico.css?154115" rel="stylesheet" type="text/css"> <script src="setup/js/funciones.js?154115" type="text/javascript"></script> <script src="setup/js/fncParametrosDeControl.js?154115" type="text/javascript"></script> </head> ...

#1 (permalink)

Antiguo

01/09/2012, 14:57

freesoftwarrior

Fecha de Ingreso: marzo-2006

Mensajes: 362

Antigüedad: 18 años, 8 meses

Puntos: 10

Mover automáticamente al siguiente tabindex

Buenas tardes:
Tengo este código resultante de una página ASP

Cita:

<html>
<head>
<title></title>

<link href="setup/css/basico.css?154115" rel="stylesheet" type="text/css">

<script src="setup/js/funciones.js?154115" type="text/javascript"></script>
<script src="setup/js/fncParametrosDeControl.js?154115" type="text/javascript"></script>

</head>

<body class="principal">

<div class="texto_normal">

<table border="1" cellspacing="0" cellpadding="5" bordercolor="silver">

<tr>
<td class="texto_normal" valign="bottom">
<br>
<input type="text" value="Mortalidad" class="texto_normal_sinmarco" tabindex=-1><br>
<input type="text" value="Temperatura promedio del día (°C)" class="texto_normal_sinmarco" size="30" tabindex=-1><br>
<input type="text" value="Oxigeno disuelto promedio del día (mg/L)" class="texto_normal_sinmarco" size="35" tabindex=-1><br>
<input type="text" value="Alimento del día (kg.)" class="texto_normal_sinmarco" size="30" tabindex=-1><br>
<input type="text" value="Tipo de alimento" class="texto_normal_sinmarco" size="30" tabindex=-1>
</td>

<td class="texto_normal" align="center">
<a onClick="actividad('44B');" style="cursor:hand;"><b>44B</b></a>
<br>
<input type="text" name="mort44B" id="mort44B" size="5" class="texto_normal" tabindex="1"
onKeyPress="return acceptNum(event);"><br>

<input type="text" name="temp44B" id="temp44B" size="5" class="texto_normal" tabindex="2"
onKeyPress="return acceptNum2(event,'temp44B');"><br>

<input type="text" name="oxig44B" id="oxig44B" size="5" class="texto_normal" tabindex="3"
onKeyPress="return acceptNum2(event,'oxig44B');"><br>

<input type="text" name="alim44B" id="alim44B" size="5" class="texto_normal" tabindex="4"
onKeyPress="return acceptNum2(event,'alim44B');"><br>

<input type="text" name="tipo44B" id="tipo44B" size="5" class="texto_normal" tabindex="5"
onKeyPress="return alimento(event);">
</td>

<td class="texto_normal" align="center">
<a onClick="actividad('51B');" style="cursor:hand;"><b>51B</b></a>
<br>
<input type="text" name="mort51B" id="mort51B" size="5" class="texto_normal" tabindex="6"
onKeyPress="return acceptNum(event);"><br>

<input type="text" name="temp51B" id="temp51B" size="5" class="texto_normal" tabindex="7"
onKeyPress="return acceptNum2(event,'temp51B');"><br>

<input type="text" name="oxig51B" id="oxig51B" size="5" class="texto_normal" tabindex="8"
onKeyPress="return acceptNum2(event,'oxig51B');"><br>

<input type="text" name="alim51B" id="alim51B" size="5" class="texto_normal" tabindex="9"
onKeyPress="return acceptNum2(event,'alim51B');"><br>

<input type="text" name="tipo51B" id="tipo51B" size="5" class="texto_normal" tabindex="10"
onKeyPress="return alimento(event);">
</td>

<td class="texto_normal" align="center">
<a onClick="actividad('53A');" style="cursor:hand;"><b>53A</b></a>
<br>
<input type="text" name="mort53A" id="mort53A" size="5" class="texto_normal" tabindex="11"
onKeyPress="return acceptNum(event);"><br>

<input type="text" name="temp53A" id="temp53A" size="5" class="texto_normal" tabindex="12"
onKeyPress="return acceptNum2(event,'temp53A');"><br>

<input type="text" name="oxig53A" id="oxig53A" size="5" class="texto_normal" tabindex="13"
onKeyPress="return acceptNum2(event,'oxig53A');"><br>

<input type="text" name="alim53A" id="alim53A" size="5" class="texto_normal" tabindex="14"
onKeyPress="return acceptNum2(event,'alim53A');"><br>

<input type="text" name="tipo53A" id="tipo53A" size="5" class="texto_normal" tabindex="15"
onKeyPress="return alimento(event);">
</td>

<td class="texto_normal" align="center">
<a onClick="actividad('73A');" style="cursor:hand;"><b>73A</b></a>
<br>
<input type="text" name="mort73A" id="mort73A" size="5" class="texto_normal" tabindex="16"
onKeyPress="return acceptNum(event);"><br>

<input type="text" name="temp73A" id="temp73A" size="5" class="texto_normal" tabindex="17"
onKeyPress="return acceptNum2(event,'temp73A');"><br>

<input type="text" name="oxig73A" id="oxig73A" size="5" class="texto_normal" tabindex="18"
onKeyPress="return acceptNum2(event,'oxig73A');"><br>

<input type="text" name="alim73A" id="alim73A" size="5" class="texto_normal" tabindex="19"
onKeyPress="return acceptNum2(event,'alim73A');"><br>

<input type="text" name="tipo73A" id="tipo73A" size="5" class="texto_normal" tabindex="20"
onKeyPress="return alimento(event);">
</td>

</table>

</div>

</body>
</html>

Lo que necesito es que cuando se precione la tecla ENTER el cursor se ubique en el siguiente campo según el tabindex

Lo de la tecla ENTER lo solucioné con este código

Cita:

function detectarEnter(tecla,campo)
{
if(tecla.keyCode==13)
{document.getElementById(campo).blur();}
}

y lo llamo de esta forma

Cita:

<input type="text" onKeyDown="detectarEnter(event,this.id);">

Hasta ahí todo va bien. Investigando un poco pensé que podría hacer algo así

Cita:

function miTabIndex(tecla,campo)
{
if(tecla.keyCode==13)
{
var curIndex = document.getElementById(campo).tabIndex;

var tabsIndexs = document.getElementsByTagName("text");

for(var i=0; i<tabsIndexs.length; i++)
{
if(tabsIndexs[i].tabIndex == (curIndex+1))
{
tabsIndexs[i].focus();
break;
}
}
}
}

llamándola de esta forma

Cita:

<input type="text" onKeyDown="miTabIndex(event,this.id);">

pero...... obviamente, no funciona.

Tengo la impresión de que estoy cerca de lograrlo.
¿Alguien podría darme una mano con esto por favor?

Desde ya quedo muy agradecido por el apoyo y tiempo brindado.
Un saludo desde Lima, Perú

#2 (permalink)

Antiguo

01/09/2012, 16:50

Javascripter

Fecha de Ingreso: abril-2009

Ubicación: Isla del Encanto, La Borinqueña [+>==]

Mensajes: 8.050

Antigüedad: 15 años, 7 meses

Puntos: 1485

Respuesta: Mover automáticamente al siguiente tabindex

buenas...
analizando el código ligeramente, en la función miTabIndex estás adquiriendo los elementos incorrectamente. es decir, en getElementsByTagName has puesto un nombre de elemento que no existe, text. dicha función captura elementos por nombre de elemento, pero parece que has indicado el tipo de input. por lo demás, parece que está bien —aunque el algoritmo no sea el más optimo.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

#3 (permalink)

Antiguo

01/09/2012, 18:46

freesoftwarrior

Fecha de Ingreso: marzo-2006

Mensajes: 362

Antigüedad: 18 años, 8 meses

Puntos: 10

Respuesta: Mover automáticamente al siguiente tabindex

Tienes razón!!!!!! No me había percatado de eso, pues confundí el name con el type. Todo parece indicar que ahora esta funcionando correctamente.

Mil gracias!!!!

Etiquetas: funcion, html, input, js, siguiente

¿Tienes una mejor respuesta a este tema? ¿Quiéres hacerle una pregunta a nuestra comunidad y sus expertos? Registrate

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

« Tema Anterior | Próximo Tema »

La zona horaria es GMT -6. Ahora son las 12:48.