javascript - saltar - pasar de un input a otro con enter jquery
Evitar el envío de formularios con la tecla enter (9)
Acabo de escribir esta pequeña función ingeniosa que funciona en la forma en sí ...
$("#form").keypress(function(e){
if (e.which == 13) {
var tagName = e.target.tagName.toLowerCase();
if (tagName !== "textarea") {
return false;
}
}
}
En mi lógica, quiero aceptar entradas durante la entrada de un área de texto. También sería una ventaja adicional reemplazar el comportamiento de la tecla Intro de los campos de entrada con el comportamiento para tabular el siguiente campo de entrada (como si se hubiera presionado la tecla de tabulación). ¿Alguien sabe de una manera de utilizar el modelo de propagación de eventos para disparar correctamente la tecla Intro en el elemento apropiado, pero evitar el envío de formularios en su prensa.
Aquí hay una versión modificada de mi función. Hace lo siguiente:
- Impide que la tecla Intro funcione en cualquier elemento de la forma que no sea el área de texto, botón, enviar.
- La tecla enter ahora actúa como una pestaña.
- preventDefault (), stopPropagation () que se invoca en el elemento está bien, pero invocado en el formulario parece impedir que el evento llegue al elemento.
Así que mi solución es verificar el tipo de elemento, si el tipo no es un área de texto (ingresa permitido), o botón / enviar (introducir = hacer clic), entonces simplemente vamos a la siguiente.
Invocar .next () en el elemento no es útil porque los otros elementos pueden no ser hermanos simples, sin embargo, dado que DOM garantiza bastante el orden al seleccionar, todo está bien.
function preventEnterSubmit(e) {
if (e.which == 13) {
var $targ = $(e.target);
if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
var focusNext = false;
$(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
if (this === e.target) {
focusNext = true;
}
else if (focusNext){
$(this).focus();
return false;
}
});
return false;
}
}
}
Desde el punto de vista de la usabilidad, cambiar el comportamiento de entrada para imitar una pestaña es una muy mala idea. Los usuarios están acostumbrados a usar la tecla enter para enviar un formulario. Así es como funciona Internet. No deberías romper esto.
En mi caso, quería evitarlo solo en un campo creado dinámicamente, y activar otro botón, por lo que era un poco diferente.
$(document).on( ''keypress'', ''.input_class'', function (e) {
if (e.charCode==13) {
$(this).parent(''.container'').children(''.button_class'').trigger(''click'');
return false;
}
});
En este caso, capturará la tecla Intro en todas las entradas con esa clase, activará el botón al lado de ellos y también evitará que se envíe el formulario principal.
Tenga en cuenta que la entrada y el botón deben estar en el mismo contenedor.
Establezca el desencadenante tanto para la forma como para las entradas, pero cuando se desencadenan los eventos de entrada, detenga la propagación al formulario llamando al método stopPropagation .
Por cierto, en mi humilde opinión, no es una gran cosa cambiar los comportamientos predeterminados a cualquier cosa que un usuario promedio esté acostumbrado, eso es lo que los enoja cuando usan su sistema. Pero si insistes, entonces el método stopPropagation es el camino a seguir.
La tecla Intro de publicación como el botón predeterminado describe cómo establecer el comportamiento predeterminado para la tecla Intro presionar. Sin embargo, a veces, debe deshabilitar el envío de formularios al presionar Enter. Si desea evitarlo por completo, debe usar el controlador OnKeyPress en la etiqueta de su página.
<body OnKeyPress="return disableKeyPress(event)">
El código de JavaScript debe ser:
<script language="JavaScript">
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
</script>
Si desea deshabilitar el envío de formularios cuando se presiona la tecla Intro en un campo de entrada, debe usar la función anterior en el controlador OnKeyPress del campo de entrada de la siguiente manera:
<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">
Fuente: http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx
Las soluciones anteriores no me funcionaban, pero encontré una solución.
Esto espera cualquier pulsación de tecla, prueba que coincida con 13, y devuelve falso si es así.
en el <HEAD>
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.which == 13) && (node.type == "text")) {
return false;
}
}
document.onkeypress = stopRKey;
Prefiero la solución de @Dmitriy Likhten, aún: solo funcionó cuando cambié el código un poco:
[...] else
{
if (focusNext){
$(this).focus();
return false; } //
}
De lo contrario, el script no funcionó. Usando Firefox 48.0.2
Puede imitar la pulsación de la tecla tab en lugar de ingresar las entradas de esta manera:
//Press Enter in INPUT moves cursor to next INPUT
$(''#form'').find(''.input'').keypress(function(e){
if ( e.which == 13 ) // Enter key = keycode 13
{
$(this).next().focus(); //Use whatever selector necessary to focus the ''next'' input
return false;
}
});
Obviamente, necesitará averiguar qué selector (es) son necesarios para enfocar la próxima entrada cuando se presione Enter.
Tenga en cuenta que los formularios de entrada única siempre se envían cuando se presiona la tecla Intro. La única forma de evitar que esto suceda es esto:
<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>