jquery comment attraper entrer la clé et changer l’événement en onglet

Je veux une solution de jquery, je dois être proche, que faut-il faire?

$('html').bind('keypress', function(e) { if(e.keyCode == 13) { return e.keyCode = 9; //set event key to tab } }); 

Je peux retourner false et cela évite que la touche entrée ne soit pressée, j’ai pensé que je pouvais simplement changer le code clé en 9 pour le rendre tabulaire mais cela ne semble pas fonctionner. Je dois être proche, que se passe-t-il?

    Voici une solution:

     $('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; } }); 

    Cela fonctionne parfaitement!

      $('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(); } }); 

    Pourquoi pas quelque chose de simple comme ça?

     $(document).on('keypress', 'input', function(e) { if(e.keyCode == 13 && e.target.type !== 'submit') { e.preventDefault(); return $(e.target).blur().focus(); } }); 

    De cette façon, vous ne déclenchez la soumission que si vous vous concentrez déjà sur le type d’entrée “submit”, et vous placez là où vous l’avez laissé. Cela le fait également fonctionner pour les entrées qui sont ajoutées dynamicment à la page.

    Note: Le flou () est devant le focus () pour quiconque pourrait avoir des écouteurs d’événement “on the flur”. Il n’est pas nécessaire que le processus fonctionne.

    PlusAsTab : Un plugin jQuery pour utiliser la touche numpad plus comme équivalent de la touche tabulation.

    PlusAsTab est également configurable pour utiliser la touche Entrée comme dans cette démo . Voir certaines de mes anciennes réponses à cette question .

    Dans votre cas, remplacez la touche Entrée par la fonctionnalité de tabulation pour la page entière (après avoir défini la touche Entrée comme onglet dans les options).

      ...  

    À partir du plugin Ben, cette version gère select et vous pouvez passer une option à allowSubmit. c’est à dire. $("#form").enterAsTab({ 'allowSubmit': true}); Cela permettra à l’utilisateur de soumettre le formulaire si le bouton Soumettre gère l’événement.

     (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 ); 

    C’est enfin ce qui fonctionne parfaitement pour moi. J’utilise jqeasyui et ça marche très 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(); } } }); 

    J’ai écrit le code de la réponse acceptée en tant que plug-in jQuery, que je trouve plus utile. (De plus, il ignore désormais les éléments de formulaire masqués, désactivés et en lecture seule).

     $.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 cette façon, je peux faire $ (‘# form-id’). EnterAsTab (); … Je suppose que je posterais car personne ne l’a encore publié en tant que plugin $ et qu’ils ne sont pas entièrement intuitifs à écrire.

    Inclut tous les types d’entrées

     $(':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(); } }); 

    Ceci est ma solution, les commentaires sont les bienvenus .. 🙂

     $('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 }); 

    Voici ce que j’ai utilisé:

     $("[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(); } }); 

    Fait attention au tabindex et n’est pas spécifique à la forme mais à l’ensemble de la page.

    Note live a été rendu obsolète par jQuery, vous devriez maintenant l’utiliser

    J’ai pris le meilleur de ce qui précède et ajouté la possibilité de travailler avec n’importe quelle entrée, en dehors des formulaires, etc. En outre, elle revient correctement au démarrage si vous atteignez la dernière entrée. Et dans le cas où une seule entrée est floue, elle recentre ensuite la seule entrée pour déclencher un gestionnaire de flou / focus externe.

     $('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(); } } }); 

    Ces solutions ne fonctionnaient pas avec ma grid de données. J’espérais qu’ils le feraient. Je n’ai pas vraiment besoin de Tab ou Enter pour passer à la prochaine entrée, colonne, ligne ou autre. J’ai juste besoin de Enter pour déclencher .focusout ou .change et ma grid de données met à jour la firebase database. J’ai donc ajouté la classe “enter” aux entrées de texte pertinentes et cela a fait l’affaire:

     $(function() { if ($.browser.mozilla) { $(".enter").keypress(checkForEnter); } else { $(".enter").keydown(checkForEnter); } }); function checkForEnter(event) { if (event.keyCode == 13) { $(".enter").blur(); } } 
     $('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; } }); 

    l’entrée visible ne peut pas être focalisée.

    Je sais que cette question est plus ancienne que Dieu, mais je n’ai jamais vu une réponse aussi élégante.

     doc.on('keydown', 'input', function(e, ui) { if(e.keyCode === 13){ e.preventDefault(); $(this).nextAll('input:visible').eq(0).focus(); } }); 

    cela semble faire le travail en quelques lignes aussi humainement que possible.

    Vous devez filtrer tous les éléments désactivés et en lecture seule. Je pense que ce code ne devrait pas couvrir les boutons

     $('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; } }); 

    J’ai eu la même exigence dans mon développement, j’ai donc fait des recherches à ce sujet. J’ai lu de nombreux articles et essayé de nombreuses solutions au cours des deux derniers jours comme le plugin jQuery.tabNext ().

    J’ai eu des problèmes avec IE11 (toute version d’IE a ce bogue). Lorsqu’un texte saisi suivi d’une saisie non textuelle, la sélection n’était pas effacée. J’ai donc créé ma propre méthode tabNext () basée sur la suggestion de solution @Sarfraz. Je pensais aussi à la manière dont il devrait se comporter (encerclez uniquement dans la forme actuelle ou peut-être dans le document complet). Je n’ai toujours pas pris soin de la propriété tabindex surtout parce que je l’utilise de temps en temps. Mais je ne l’oublierai pas.

    Pour que ma consortingbution puisse être utile à tout le monde, j’ai créé l’exemple jsfiddle ici https://jsfiddle.net/mkrivan/hohx4nes/

    J’inclus également la partie JavaScript de l’exemple ici:

      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; 

    J’ai laissé des lignes commentées afin que ma reflection puisse être suivie.

    Je sais que c’est plutôt vieux, mais je cherchais la même réponse et j’ai constaté que la solution choisie n’obéissait pas à l’index tabIndex. Je l’ai donc modifié comme suit, ce qui fonctionne pour moi. Veuillez noter que maxTabNumber est une variable globale contenant le nombre maximum de champs de saisie tabables.

      $('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 vous utilisez IE, cela a fonctionné très bien pour moi: