[SOLUCIONADO] manejo del teclado con jquey

charlyalize · #1 (**permalink**) 13/02/2014, 17:55

hola amigos¡¡¡

estoy trabajando con jQuery JavaScript Library v1.4.4
con la función de manejo del teclado.

<script src="/sistema/js/jquery.min.js"></script>
<script language="JavaScript">
$(function(){
$("input[type=text]").keydown(function(e){
if (e.keyCode == 13) {
var tabIndex = parseFloat($(this).attr("tabindex")) + 1;
$("input[tabindex=" + tabIndex + "]").focus();
return false;
}
if (e.keyCode == 27) {
window.close();
return false;
}
})
})

La función anda perfecto con los input type="text" pero tengo que implementar un select con 3 opciones y al seleccionar un valor y darle enter no me funciona como con los input text.

tienen alguna idea de como solucionarlo???

Gracias...

adjunto el formulario completo...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="/sistema/js/jquery.min.js"></script>
<script language="JavaScript">
$(function(){
$("input[type=text]").keydown(function(e){
if (e.keyCode == 13) {
var tabIndex = parseFloat($(this).attr("tabindex")) + 1;
$("input[tabindex=" + tabIndex + "]").focus();
return false;
}
if (e.keyCode == 27) {
window.close();
return false;
}
})
})
</script>
</head>
<div class="Estilo1" align="center"><strong>CHOFERES</strong></div>
<font color="red"> <b> Todos los campos con "*" son OBLIGATORIOS </b> </font>
<div id="Layer2">
<form name="form1" method="post" action="">
<label class="Estilo2">Movil</label>
<input name="" type="text" readonly="true" tabindex="1" size="3">

<label class="Estilo2">Nombre
<input type="text" name="textfield" tabindex="2" size="35" autofocus>
</label>
<font color="red"> <b> * </b> </font>

<label class="Estilo2">Direccion
<input type="text" name="textfield" tabindex="3" size="35">
</label>
<font color="red"> <b> * </b> </font>

<label class="Estilo2">Localidad
<input type="text" name="textfield2" tabindex="4">
</label>
<font color="red"> <b> * </b> </font>

<label Class="Estilo2">Telefono
<input type="text" name="textfield3" tabindex="5" SIZE="12">
</label>
<font color="red"> <b> * </b> </font>

<label class="Estilo2">DNI
<input type="text" name="textfield4" tabindex="6" size="8">
<font color="red"> <b> * </b> </font>
</label>

<label class="Estilo2">Licencia
<input type="text" name="textfield5" tabindex="7" size="1">
<font color="red"> <b> * </b> </font>
</label>

<label Class="Estilo2">Vencimiento
<input type="text" name="textfield6" tabindex="8">
<font color="red"> <b> * </b> </font>
</label>

<label Class="Estilo2">Base
<input type="text" name="textfield7" tabindex="9" Size="3">
<font color="red"> <b> * </b> </font>
</label>

<label Class="Estilo2">Patente
<input type="text" name="textfield8" tabindex="10" size="5">
<font color="red"> <b> * </b> </font>
</label>

<label class="Estilo2">Marca/Modelo
<input type="text" name="textfield9" tabindex="11" size="10">
<font color="red"> <b> * </b> </font>
</label>

<label Class="Estilo2">Color
<input type="text" name="textfield10" tabindex="12" size="3">
</label>
<p> </p>
</form>
</div>

</body>
</html>

Alexis88 · #2 (**permalink**) 13/02/2014, 23:14

Los eventos con las teclas funcionan igual en un elemento <select> que en un <input>:

Código Javascript:

Ver original$("select").keydown(function(e){
    var tecla = e.keyCode || e.which;
  
    if (tecla == 13)
        alert("Hola");
  
    if (tecla == 27)
        alert("Mundo");
});

Sabiendo esto, solamente te queda adaptarlo a tus necesidades, saludos.

charlyalize · #3 (**permalink**) 13/02/2014, 23:31

Mil GRACIAS "Alexis88", INVALORABLE EL APORTE¡¡¡

SALUDOS¡¡¡