2012-02-09 273 views
21

Tengo algunos cuadros de texto en una página .net y quiero lograr lo siguiente con jQuery: si el usuario presiona return, el programa debería comportarse como si hubiera usado la tecla tab, así , seleccionando el siguiente elemento. He probado el siguiente código (y algo más):Simular presionar la tecla de tabulación con jQuery

<script type="text/javascript"> 

jQuery(document).ready(function() { 

    $('.tb').keypress(function (e) { 
     if (e.keyCode == 13) 
     { 
      $(this).trigger("keydown", [9]); 
      alert("return pressed"); 
     } 
    }); 
}); 

<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox> 
<asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox> 

pero simplemente no funciona! ¿Perder algo, cometer un error?

Aquí algunos enlaces que utilizan

here

and here

+1

Bueno, no; porque no pasas el evento a la función. Necesitas usar: '$ ('. Tb'). Tecla presionar (función (e) {' luego la función tiene acceso al evento, y desde allí 'event.keyCode', aunque creo' e.which' es el normalizado Versión de jQuery (que puede o no ser necesaria). –

+0

¿Puede aclarar que "no funciona"? ¿Qué pasa? ¿Tiene errores de JS? –

+0

@DavidThomas: gracias, lo solucionó – AGuyCalledGerald

Respuesta

3

probar este

$(this).trigger({ 
    type: 'keypress', 
    which: 9 
}); 
+4

Gracias, pero todavía no reacciona. – AGuyCalledGerald

+0

Consulte la consola JS para ver si hay errores, intente ejecutar el código por separado en un archivo HTML limpio y vea si puede generar la situación específica necesaria. intente moverlo a su archivo maestro. –

+1

¿Puedes proporcionar un buen violín para eso? Porque lo intenté y no funcionó. Ver [aquí] (http://jsfiddle.net/saeedneamati/gtbUp/). –

8

he creado un simple jQuery plugin cual no resuelve este problema. Utiliza el selector ': tabbable' de jQuery UI para encontrar el siguiente elemento 'tabbable' y lo selecciona.

uso

Ejemplo:

// Simulate tab key when enter is pressed   
$('.tb').bind('keypress', function(event){ 
    if(event.which === 13){ 
     if(event.shiftKey){ 
      $.tabPrev(); 
     } 
     else{ 
      $.tabNext(); 
     } 
     return false; 
    } 
}); 
+0

gracias, no usé el plugin de agujeros, pero el selector con: tabbable fue una buena toma de cerebro: P – prdatur

7

De múltiples respuestas que he combinado la solución perfecta para mí, donde entrará actúa como pestaña en las entradas y seleccione y toma centrarse en la próxima entrada, seleccione o área de texto mientras se permite entrar en el interior de área de texto .

$("input,select").bind("keydown", function (e) { 
    var keyCode = e.keyCode || e.which; 
    if(keyCode === 13) { 
     e.preventDefault(); 
     $('input, select, textarea') 
     [$('input,select,textarea').index(this)+1].focus(); 
    } 
}); 
+0

Esto es casi perfecto para mi proyecto, pero lo necesitaba para no tabular cada botón de opción . Un bucle para omitir las entradas con el mismo nombre hizo el truco. 'var nextInput = $ ('input, select, textarea') [$ ('input, select, textarea'). index (this) +1]; while ($ (this) .attr ('name') === $ (nextInput) .attr ('name')) { nextInput = $ ('input, select, textarea') [$ ('input, select , textarea '). index (nextInput) +1]; } ' Todavía se atasca dentro de las entradas ocultas. Por lo general, podrían estar en la parte superior del formulario, pero tengo una entrada condicionalmente oculta que tiene que volver a aparecer en el lugar correcto. – malcanso

+1

'if (keyCode === 13) {' es mejor – Artru

Cuestiones relacionadas