How To Convert An Enter Key Press Into A Tab Key Press For Web Pages

January 21, 2024 Post a Comment

The enter key press should work like a Tab key press.The enter key press for TextArea and Submit Button should work as usual.Focus should skip from the next element when the next f

Solution 1:

First off, this is probably not a great idea usability-wise. However, here's something that should work:

$(":input").on("keydown", function(event) {
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) {
        event.stopPropagation();
        event.preventDefault();

        $(this)
            .nextAll(":input:not(:disabled, [readonly='readonly'])")
            .first()
            .focus();
    }
});

Example:http://jsfiddle.net/NDcrk/

The piece that finds the next input may have to change, depending on your markup.

Solution 2:

This solution work for me. Tested it on IE and FireFox.

<scripttype="text/javascript">functiontabE(obj, e) {
        var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz if (e.keyCode == 13) {
            var ele = document.forms[0].elements;
            for (var i = 0; i < ele.length; i++) {
                var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other if (obj == ele[i]) {
                    ele[q].focus();
                    break
                }
            }
            returnfalse;
        }
    }
</script><formMETHOD="POST"><inputname=""type="text"onkeypress="return tabE(this,event)"><br><inputname=""type="text"onkeypress="return tabE(this,event)"><br><inputname=""type="text"onkeypress="return tabE(this,event)"><br><INPUTTYPE="submit"Value="Ok"></form>

I found it here.

Solution 3:

How to check form element is displayed in this case? I have a many input(text box, radio button,) but some elements are displayed, some elements not displayed

<scripttype="text/javascript">functiontabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other if (obj == ele[i]) {
ele[q].focus();
break
}
}
returnfalse;
}
}
</script><formMETHOD="POST"><inputname=""type="text"onkeypress="return tabE(this,event)"><br><inputname=""type="text"onkeypress="return tabE(this,event)"><br><inputname=""type="text"onkeypress="return tabE(this,event)"><br><INPUTTYPE="submit"Value="Ok"></form>

Solution 4:

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you.

PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.

Since you want enter/↵ instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.

Baca Juga

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus// Number 13 found through demo at// https://api.jquery.com/event.which/key: 13
});

Sample HTML

<!-- Enable enter as tab as the default for all fields in this form --><formdata-plus-as-tab="true"><inputtype="text"value="Enter skips to the next field"autofocus="autofocus" /><!-- Exclude this textarea --><textareadata-plus-as-tab="false">Enter works as usual</textarea><inputtype="text"value="Enter skips to the next field" /><select><option>Enter skips here too</option></select><!-- Exclude this submit button --><buttontype="submit"data-plus-as-tab="false">Enter works as usual</button></form>

As you can see, it's easy to enable all elements in a container with data-plus-as-tab="true", and it's easy to exclude specific elements with data-plus-as-tab="false". You can also exclude certain types (on existing elements) from javascript with $('textarea, :button').plusAsTab(false);.

You can try it out yourself in the PlusAsTab enter as tab demo.

Solution 5:

The easiest way to solve this problem with the focus function of JavaScript is as follows:

You can copy it and try it @ home!

<!DOCTYPE html><htmllang="en"dir="ltr"><head><metacharset="utf-8"><title></title></head><body><inputid="input1"type="text"onkeypress="pressEnter()" /><inputid="input2"type="text"onkeypress="pressEnter2()" /><inputid="input3"type="text"/><scripttype="text/javascript">functionpressEnter() {
      // Key Code for ENTER = 13if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    functionpressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script></body></html>

JavaScript Creator