jquery hoe de enter-toets te vangen en event naar tab te veranderen

Ik wil een jQuery-oplossing, ik moet dichtbij zijn, wat moet er gebeuren?

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

Ik kan false retourneren en het voorkomt dat de enter-toets wordt ingedrukt. Ik dacht dat ik de keyCode gewoon in 9 kon veranderen om er een tab van te maken, maar het lijkt niet te werken. Ik moet dichtbij zijn, wat is er aan de hand?


Antwoord 1, autoriteit 100%

Hier is een oplossing:

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

Antwoord 2, autoriteit 43%

Dit werkt perfect!

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

Antwoord 3, autoriteit 12%

Waarom niet zoiets simpels?

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

Op deze manier activeer je de indiening niet, tenzij je al gefocust bent op het invoertype ‘indienen’, en het brengt je precies waar je was gebleven. Hierdoor werkt het ook voor invoer die dynamisch aan de pagina wordt toegevoegd.

Opmerking: de blur() staat voor de focus() voor iedereen die luisteraars van “on blur”-gebeurtenissen heeft. Het is niet nodig om het proces te laten werken.


Antwoord 4, autoriteit 9%

PlusAsTab: een jQuery-plug-in om de numpad plus-toets te gebruiken als een equivalente tab-toets.

PlusAsTab is ook configureerbaar om de enter-toets te gebruiken zoals in deze demo. Zie enkele van mijnoudere antwoorden op deze vraag.

In jouw geval de enter-toets vervangen door tab-functionaliteit voor de hele pagina (nadat je de enter-toets als tab in de opties hebt ingesteld).

<body data-plus-as-tab="true">
    ...
</body>

Antwoord 5, autoriteit 6%

Dit is wat ik heb gebruikt:

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

Let op de tabindexen is niet specifiek voor het formulier maar voor de hele pagina.

Opmerkingliveis verouderd door jQuery, nu zou u on

moeten gebruiken


Antwoord 6, autoriteit 6%

Gebouw van Ben’s plug-in deze versie behandelt selectie en u kunt een optie doorgeven om allowSubmit toe te staan. d.w.z. $("#form").enterAsTab({ 'allowSubmit': true});Hiermee kan enter het formulier verzenden als de verzendknop de gebeurtenis verwerkt.

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

Antwoord 7, autoriteit 5%

Ik heb de code van het geaccepteerde antwoord geschreven als een jQuery-plug-in, wat ik nuttiger vind. (ook negeert het nu verborgen, uitgeschakelde en alleen-lezen formulierelementen).

$.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;
};

Op deze manier kan ik $(‘#form-id’).enterAsTab(); … Dacht dat ik zou posten omdat niemand het nog als een $ plug-in heeft gepost en ze niet helemaal intuïtief zijn om te schrijven.


Antwoord 8, autoriteit 5%

Dit is eindelijk wat perfect werkt voor mij. Ik gebruik jqeasyui en het werkt prima

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

Antwoord 9, autoriteit 4%

Omvat alle soorten invoer

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

Antwoord 10, autoriteit 3%

Dit is mijn oplossing, feedback is welkom.. 🙂

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

11

Ik weet dat dit nogal oud is, maar ik was op zoek naar hetzelfde antwoord en ontdekte dat de gekozen oplossing niet voldeed aan de tabIndex. Ik heb het daarom gewijzigd in het volgende, wat voor mij werkt. Houd er rekening mee dat maxTabNumber een globale variabele is die het maximale aantal invoervelden met tabs bevat

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

Snippet uitvouwen


Antwoord 12

Hier is een jQuery-plug-in die ik heb geschreven en die de enter-toets behandelt als een callback of als een tab-toets (met een optionele callback):

$(document).ready(function() {
  $('#one').onEnter('tab');
  $('#two').onEnter('tab');
  $('#three').onEnter('tab');
  $('#four').onEnter('tab');
  $('#five').onEnter('tab');
});
/**
 * jQuery.onEnter.js
 * Written by: Jay Simons
 * Cloudulus.Media (https://code.cloudulus.media)
 */
if (window.jQuery) {
    (function ($) {
        $.fn.onEnter = function (opt1, opt2, opt3) {
            return this.on('keyup', function (e) {
                var me = $(this);
                var code = e.keyCode ? e.keyCode : e.which;
                if (code == 13) {
                    if (typeof opt1 == 'function')
                    {
                        opt1(me, opt2);
                        return true;
                    }else if (opt1 == 'tab')
                    {
                        var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])');
                        var foundMe = false;
                        var next = null;
                        eles.each(function(){
                            if (!next){
                                if (foundMe) next = $(this);
                                if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true;
                            }
                        });
                        next.focus();
                        if (typeof opt2 === 'function')
                        {
                            opt2(me, opt3);
                        }
                        return true;
                    }
                }
            }).on('keydown', function(e){
                var code = e.keyCode ? e.keyCode : e.which;
                if (code == 13)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
            });
        }
    })(jQuery);
} else {
    console.log("onEnter.js: This class requies jQuery > v3!");
}
input,
select,
textarea,
button {
  display: block;
  margin-bottom: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="one" type="text" placeholder="Input 1" />
  <input id="two" type="text" placeholder="Input 2" />
  <select id="four">
    <option selected>A Select Box</option>
    <option>Opt 1</option>
    <option>Opt 2</option>
  </select>
  <textarea id="five" placeholder="A textarea"></textarea>
  <input id="three" type="text" placeholder="Input 3" />
  <button>A Button</button>
</form>

Snippet uitvouwen


Antwoord 13

Ik hoef alleen maar naar invoer en selectie te gaan, en het element moet focusseerbaar zijn. Dit script werkt beter voor mij:

$('body').on('keydown', 'input, select', function(e) {
    if (e.key === "Enter") {
        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
        focusable = form.find('input,select,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

Misschien helpt het iemand.


Antwoord 14

Als je IE gebruikt, werkte dit prima voor mij:

   <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>

Other episodes