style - jquery cómo capturar la tecla Intro y cambiar el evento a pestaña
jquery id value (18)
Quiero una solución jquery, debo estar cerca, ¿qué hay que hacer?
$(''html'').bind(''keypress'', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
Puedo devolver falso e impide que se presione la tecla Intro, pensé que podría cambiar el código de clave a 9 para hacer que se muestre, pero parece que no funciona. Tengo que estar cerca, ¿qué está pasando?
PlusAsTab : un plugin de jQuery para usar la tecla numpad plus como una tecla de tabulación equivalente.
PlusAsTab también se puede configurar para usar la tecla Intro como en esta demostración . Vea algunas de mis respuestas anteriores a esta pregunta .
En su caso, reemplazando la tecla enter con la funcionalidad de tabulación para toda la página (después de configurar la tecla enter como pestaña en las opciones).
<body data-plus-as-tab="true">
...
</body>
¿Por qué no algo simple como esto?
$(document).on(''keypress'', ''input'', function(e) {
if(e.keyCode == 13 && e.target.type !== ''submit'') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
De esta manera, no activa el envío a menos que ya esté centrado en el tipo de entrada de "enviar" y lo coloque justo donde lo dejó. Esto también lo hace funcionar para entradas que se agregan dinámicamente a la página.
Nota: El desenfoque () se encuentra delante del foco () para cualquier persona que pueda tener algún oyente de eventos "en desdibujamiento". No es necesario que el proceso funcione.
A partir del complemento de Ben, esta versión maneja seleccionar y puede pasar una opción para permitirEnviar. es decir. $("#form").enterAsTab({ ''allowSubmit'': true}); Esto le permitirá ingresar para enviar el formulario si el botón Enviar está manejando el evento.
(function( $ ){
$.fn.enterAsTab = function( options ) {
var settings = $.extend( {
''allowSubmit'': false
}, options);
this.find(''input, select'').live("keypress", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13 ) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch(err) {
// handle objects not offering select
}
return false;
}
});
return this;
};
})( jQuery );
Escribí el código de la respuesta aceptada como un complemento jQuery, que me parece más útil. (Además, ahora ignora los elementos ocultos, deshabilitados y de solo lectura).
$.fn.enterAsTab = function () {
$(this).find(''input'').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
return this;
};
De esta forma puedo hacer $ (''# form-id''). EnterAsTab (); ... Imaginé que publicaría, ya que nadie lo ha publicado como un $ plugin y no son del todo intuitivos para escribir.
Esta es mi solución, los comentarios son bienvenidos .. :)
$(''input'').keydown( function (event) { //event==Keyevent
if(event.which == 13) {
var inputs = $(this).closest(''form'').find('':input:visible'');
inputs.eq( inputs.index(this)+ 1 ).focus();
event.preventDefault(); //Disable standard Enterkey action
}
// event.preventDefault(); <- Disable all keys action
});
Estas soluciones no funcionaron con mi cuadrícula de datos. Esperaba que lo hicieran. Realmente no necesito Tab o Enter para pasar a la siguiente entrada, columna, fila o lo que sea. Solo necesito ingresar para desencadenar .focusout o .change y my datagrid actualiza la base de datos. Así que agregué la clase "enter" a las entradas de texto relevantes y esto me sirvió de algo:
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
Esto es lo que he estado usando:
$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
//Only do something when the user presses enter
if (e.keyCode == 13) {
var nextElement = $(''[tabindex="'' + (this.tabIndex + 1) + ''"]'');
console.log(this, nextElement);
if (nextElement.length)
nextElement.focus()
else
$(''[tabindex="1"]'').focus();
}
});
Presta atención al tabindex y no es específico del formulario, sino de toda la página.
Nota en live ha sido obsoleta por jQuery, ahora debería usarla on
Esto es por fin lo que está funcionando para mí perfectamente. Estoy usando jqeasyui y está funcionando bien
$(document).on(''keyup'', ''input'', function(e) {
if(e.keyCode == 13 && e.target.type !== ''submit'') {
var inputs = $(e.target).parents("form").eq(0).find(":input:visible"),
idx = inputs.index(e.target);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus();
inputs[idx + 1].select();
}
}
});
Esto funciona perfecto!
$(''input'').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(this).closest(''form'').find('':input:visible'');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
Incluye todo tipo de entradas
$('':input'').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
var inputs = $(this).closest(''form'').find('':input:visible:enabled'');
if ((inputs.length-1) == inputs.index(this))
$('':input:enabled:visible:first'').focus();
else
inputs.eq(inputs.index(this) + 1).focus();
}
});
Sé que esta pregunta es más antigua que Dios, pero nunca vi una respuesta que fuera tan elegante.
doc.on(''keydown'', ''input'', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll(''input:visible'').eq(0).focus();
}
});
eso parece hacer el trabajo en la menor cantidad de líneas posible.
Sé que esto es bastante antiguo, pero estaba buscando la misma respuesta y descubrí que la solución elegida no obedecía a tabIndex. Por lo tanto, lo he modificado para el siguiente que funciona para mí. Tenga en cuenta que maxTabNumber es una variable global que contiene el número máximo de campos de entrada tabulables
$(''input'').on("keypress", function (e) {
if (e.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
var tabIndex = parseInt($(this).attr("tabindex"));
tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
if (tabIndex == 0) { tabIndex = 1; }
$(''[tabindex='' + tabIndex + '']'').focus();
$(''[tabindex='' + tabIndex + '']'').select();
return false;
}
});
Si está utilizando IE, esto funcionó muy bien para mí:
<body onkeydown="tabOnEnter()">
<script type="text/javascript">
//prevents the enter key from submitting the form, instead it tabs to the next field
function tabOnEnter() {
if (event.keyCode==13)
{
event.keyCode=9; return event.keyCode
}
}
</script>
Tenía el mismo requisito en mi desarrollo, así que investigué sobre esto. He leído muchos artículos y he probado muchas soluciones durante los últimos dos días, como el complemento jQuery.tabNext ().
Tuve algunos problemas con IE11 (todas las versiones de IE tienen este error). Cuando un texto de entrada seguido de una entrada de texto no se borró la selección. Así que he creado mi propio método tabNext () basado en la sugerencia de solución @Sarfraz. También estaba pensando en cómo debería comportarse (solo circule en el formulario actual o quizás a través del documento completo). Todavía no me ocupé de la propiedad tabindex principalmente porque la estoy usando de vez en cuando. Pero no lo olvidaré.
Para que mi contribución pueda ser útil para todos, he creado el ejemplo jsfiddle aquí https://jsfiddle.net/mkrivan/hohx4nes/
Incluyo también la parte de JavaScript del ejemplo aquí:
function clearSelection() {
if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());
console.log("document.getSelection");
} else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
window.getSelection().removeAllRanges();
window.getSelection().addRange(document.createRange());
console.log("window.getSelection.removeAllRanges");
} else if (window.getSelection().empty) { // maybe for old Chrome
window.getSelection().empty();
console.log("window.getSelection.empty");
}
} else if (document.selection) { // IE8- deprecated
document.selection.empty();
console.log("document.selection.empty");
}
}
function focusNextInputElement(node) { // instead of jQuery.tabNext();
// TODO: take the tabindex into account if defined
if (node !== null) {
// stay in the current form
var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
// if you want through the full document (as TAB key is working)
// var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
var idx = inputs.index(node) + 1; // next input element index
if (idx === inputs.length) { // at the end start with the first one
idx = 0;
}
var nextInputElement = inputs[idx];
nextInputElement.focus(); // handles submit buttons
try { // if next input element does not support select()
nextInputElement.select();
} catch (e) {
}
}
}
function tabNext() {
var currentActiveNode = document.activeElement;
clearSelection();
focusNextInputElement(currentActiveNode);
}
function stopReturnKey(e) {
var e = (e) ? e : ((event) ? event : null);
if (e !== null) {
var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
if (node !== null) {
var requiredNode = $(node).is('':input'')
// && !$(node).is('':input[button]'')
// && !$(node).is('':input[type="submit"]'')
&& !$(node).is(''textarea'');
// console.log(''event key code '' + e.keyCode + ''; required node '' + requiredNode);
if ((e.keyCode === 13) && requiredNode) {
try {
tabNext();
// clearSelection();
// focusNextInputElement(node);
// jQuery.tabNext();
console.log("success");
} catch (e) {
console.log("error");
}
return false;
}
}
}
}
document.onkeydown = stopReturnKey;
Dejé las filas comentadas para que mi pensamiento pueda ser seguido.
Tomé lo mejor de lo anterior y agregué la capacidad de trabajar con cualquier entrada, fuera de formularios, etc. También regresa correctamente para comenzar ahora si llega a la última entrada. Y en el caso de que solo una entrada se desenfoque, entonces reenfoca la entrada única para activar cualquier manejador de desenfoque / enfoque externo.
$(''input,select'').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(''#content'').find('':input:visible'');
var nextinput = 0;
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});
debe filtrar todos los elementos deshabilitados y de solo lectura. creo que este código no debería cubrir los botones
$(''body'').on(''keydown'', ''input, select, textarea'', function(e) {
var self = $(this),
form = self.parents(''form:eq(0)''),
submit = (self.attr(''type'') == ''submit'' || self.attr(''type'') == ''button''),
focusable,
next;
if (e.keyCode == 13 && !submit) {
focusable = form.find(''input,a,select,button,textarea'').filter('':visible:not([readonly]):not([disabled])'');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
$(''input'').on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
$(''input'').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
la entrada visible no se puede enfocar.