Best IT Recipes

Jquery how to catch input key and change event to tab

I want a jquery solution, I have to be close, what needs to be done?

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

I can return false, and it does not allow pressing the enter key, I thought I could just change keyCode to 9 to make it a tab, but it does not work. I have to be around, what's going on?

+61
jquery events keyevent
Feb 25 '10 at 16:16
source share
17 answers

Here is the 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; } });
+52
Feb 25 '10 at 16:21
source share

This works great!

  $('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(); } });
+27
May 25 '11 at 17:48
source share

Why not so easy?

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

This way, you don't start sending unless you are focused on the send type and it puts you right where you left off. It also allows you to work with inputs that are dynamically added to the page.

Note. Blur () is in front of the focus () for anyone who can have blur event listeners. It is not necessary for the process to work.

+8
May 27 '13 at 21:24
source share

PlusAsTab : jQuery plugin for using the numpad plus key as the equivalent of a tab.

PlusAsTab is also configured to use an input key, as in this demo . See some of my older answers to this question .

In your case, replacing the enter key with a tab for the entire page (after setting the enter key as a tab in the options).

 <body data-plus-as-tab="true"> ... </body>
+7
Apr 30 '12 at 19:27
source share

Building from the Ben plugin in this version handles select, and you can pass the allowSubmit option. i.e. $("#form").enterAsTab({ 'allowSubmit': true}); This will allow you to enter to submit the form if the submit button handles the event.

 (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 );
+5
Apr 05 '12 at 22:24
source share

This is finally what works great for me. I am using jqeasyui and it works great

 $(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(); } } });
+4
Nov 03 '13 at 7:55
source share

I wrote the code from the accepted answer as a jQuery plugin, which I find more useful. (he also now ignores hidden, disabled, and readonly form elements).

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

That way I can do $ ('# form-id'). enterAsTab (); ... I realized that I would publish it since no one has posted it as the $ plugin yet, and they are not very intuitive to write.

+3
Apr 05 '12 at 3:25
source share

This is my solution, feedback is welcome. :)

 $('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 });
+2
Apr 3 2018-11-21T00:
source share

I took the best of the above and added the ability to work with any input, outside of forms, etc. It also correctly returns back to start if you reach the last entry. And in the case of only one input, it blurs, then reorients one input to start any external blur / focus handlers.

 $('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(); } } });
+2
Mar 14 '13 at 9:12
source share

Here is what I used:

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

Pay attention to tabindex and is not specific to the form, but for the entire page.

live note deprecated by jQuery, now you should use on

+2
Oct 19 '13 at 8:01
source share

Includes all types of inputs.

 $(':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(); } });
+2
Jun 12 '14 at 2:05
source share

These solutions did not work with my datagrid. I was hoping they would do it. I really don't need Tab or Enter to go to the next input, column, row, or whatever. I just need Enter to run .focusout or .change, and my datagrid updates the database. So I added the "enter" class to the corresponding text inputs, and this did the trick for me:

 $(function() { if ($.browser.mozilla) { $(".enter").keypress(checkForEnter); } else { $(".enter").keydown(checkForEnter); } }); function checkForEnter(event) { if (event.keyCode == 13) { $(".enter").blur(); } }
+1
Mar 16 2018-12-12T00:
source share
 $('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; } });

The visible input cannot be focused.

0
Mar 16
source share

I know this question is older than God, but I have never seen an answer that was so elegant.

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

which seems to do the work on as few lines as humanly possible.

0
Aug 11 '13 at 3:05
source share

you should filter out all disabled and readonly elements only. I think this code should not cover buttons

 $('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; } });
0
Dec 23 '16 at 8:29
source share

I had the same requirement in my development, so I researched this. I have read many articles and tried many solutions over the past two days, such as the jQuery.tabNext () plugin.

I had some problems with IE11 (all this version of IE has this error). When the input text was accompanied by non-text input, the selection was not cleared. So I created my own tabNext () method based on the @Sarfraz solution suggestion. I also thought about how he should behave (only a circle in the current form or, perhaps, through the full document). I still did not care about the properties of tabindex mainly because I use it sometimes. But I will not forget that.

So that my contribution could be useful for everyone, I created a jsfiddle example here https://jsfiddle.net/mkrivan/hohx4nes/

I also include the JavaScript part in the example here:

  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;

I also left commented lines, so my thinking can be done.

0
May 21 '17 at 9:09 a.m.
source share

If you are using IE, this will work fine for me:

  <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>
-one
May 4 '16 at 10:05 pm
source share


More articles:


All Articles