Cómo convertir una tecla Intro Pulse en una pestaña Presione la tecla para páginas web

Question

La tecla Intro debe funcionar como una tecla de tabulación presionada. La tecla Intro para TextArea y el botón Enviar deben funcionar como siempre. El foco debe saltarse de la siguiente elemento cuando el siguiente campo está desactivado/solo de lectura.

gracias,

Answer 1

En primer lugar, esto probablemente no es una gran idea usability-wise. Sin embargo, aquí hay algo que debería funcionar:

$(":input").on("keydown", function(event) { 
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     $(this) 
      .nextAll(":input:not(:disabled, [readonly='readonly'])") 
      .first() 
      .focus(); 
    } 
}); 

Ejemplo:http://jsfiddle.net/NDcrk/

La pieza que se encuentra la siguiente entrada puede tener que cambiar, dependiendo de su margen de beneficio.

Answer 2

Tuve un problema similar, donde quería presionar + en el teclado numérico para desplazarme al siguiente campo. Ahora he lanzado una biblioteca que creo que te ayudará.

PlusAsTab: Un complemento jQuery para usar la tecla numpad plus como una tecla de tabulación equivalente.

Puesto que usted quiere entrar /↵ su lugar, puede configurar las opciones. Averigüe qué tecla desea usar con el jQuery event.which demo.

JoelPurra.PlusAsTab.setOptions({ 
    // Use enter instead of plus 
    // Number 13 found through demo at 
    // https://api.jquery.com/event.which/ 
    key: 13 
}); 

HTML de ejemplo

<!-- Enable enter as tab as the default for all fields in this form --> 
<form data-plus-as-tab="true"> 
    <input type="text" value="Enter skips to the next field" autofocus="autofocus" /> 
    <!-- Exclude this textarea --> 
    <textarea data-plus-as-tab="false">Enter works as usual</textarea> 
    <input type="text" value="Enter skips to the next field" /> 
    <select><option>Enter skips here too</option></select> 
    <!-- Exclude this submit button --> 
    <button type="submit" data-plus-as-tab="false">Enter works as usual</button> 
</form> 

Como se puede ver, es fácil para que todos los elementos en un recipiente con data-plus-as-tab="true", y es fácil para excluir elementos específicos con data-plus-as-tab="false". También puede excluir ciertos tipos (en elementos existentes) de javascript con $('textarea, :button').plusAsTab(false);.

Puede probarlo usted mismo en el PlusAsTab enter as tab demo.

Answer 3

Esta solución funciona para mí. Probado en IE y FireFox.

<script type="text/javascript"> 
    function tabE(obj, e) { 
     var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
     if (e.keyCode == 13) { 
      var ele = document.forms[0].elements; 
      for (var i = 0; i < ele.length; i++) { 
       var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
       if (obj == ele[i]) { 
        ele[q].focus(); 
        break 
       } 
      } 
      return false; 
     } 
    } 
</script> 

<form METHOD="POST"> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <INPUT TYPE="submit" Value="Ok"> 
</form> 

Lo encontré here.

Answer 4

¿Cómo comprobar el elemento del formulario se muestra en este caso? Tengo muchos entrada (cuadro de texto, botón de radio,) pero se muestran algunos elementos, algunos elementos no se muestran

<script type="text/javascript"> 
function tabE(obj, e) { 
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
if (e.keyCode == 13) { 
var ele = document.forms[0].elements; 
for (var i = 0; i < ele.length; i++) { 
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
if (obj == ele[i]) { 
ele[q].focus(); 
break 
} 
} 
return false; 
} 
} 
</script> 

<form METHOD="POST"> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<INPUT TYPE="submit" Value="Ok"> 
</form>