Utilizar la tecla Intro como un tabulador en un formulario II
1 COMENTARIO - Publicado hace 43 meses - Clasificado en: JAVASCRIPT, SNIPPETSA raíz del post Utilizar la tecla Intro como un tabulador en un formulario, en el script evitaba el envio del formulario cuando un usuario (que hay bastantes) pulsaba Intro en vez del tabulador cuando deseban pasar al siguiente campo, Esteban me mandó una interesante modificación para que el script atendiese al orden de los campos establecidos mediante la propiedad tabindex.
Ver ejemplo en funcionamiento » »
Javascript:
<script language="javascript">HTML:
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = field.form.elements[i].tabIndex + 1;
for( j = 0 ; j < field.form.elements.length; j++){
if( field.form.elements[j].tabIndex == i){
break;
}
}
field.form.elements[j].focus();
return false;
}
else
return true;
}
</script>
<form name="form1" method="post" action="" >
<p>
<label>tabindex1
<input type="text" name="textfield" tabindex="1" onkeypress="return handleEnter(this, event)">
</label>
</p>
<p>
<label>tabindex4
<input type="text" name="textfield2" tabindex="4" onkeypress="return handleEnter(this, event)">
</label>
</p>
<p>tabindex3
<label>
<input type="text" name="textfield3" tabindex="3" onkeypress="return handleEnter(this, event)">
</label>
</p>
<p>tabindex2
<label>
<input type="text" name="textfield4" tabindex="2" onkeypress="return handleEnter(this, event)">
</label>
</p>
</form>
Algunas entradas relacionadas:
- Detectar Internet Explorer 7 con Javascript
- Deshabilitar la selecci贸n de texto en la web
- Obtener el tama脙卤o de la ventana o viewport con Javascript
- Dar la opción de abrir los enlaces en ventana nueva o no
- Capturar el evento de cierre del navegador
- Recoger parámetros URL con Javascript
- Convertir un color en RGB a Hexadecimal con javascript
También te puede interesar:
| Tutorial Photoshop: crear una moderna cabecera 2.0 | Musgle | Las 10 tipografías favoritas de Veerle | WP e-Commerce | 35+ Tutoriales y pinceles para conseguir efectos de agua con Photoshop |
COMENTARIOS
|
|
Publicado hace 4 meses jc - esta bonito, pero tienen un inconveniente: no hace validacion; osea no ejecuta changed, osea autopostback=true no funca. a ver si lo puedes mejorar te agradeceria mucho. |





















dise帽o web valencia en 500 iconos gratuitos para tus aplicaciones web




