用户按下Enter键时如何触发标签页

Question

I got the code from here jquery how to catch enter key and change event to tab

(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        this.find('input, select, textarea, button').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);

My questions are:

1. I want this script also work on select (dropdown), textarea, button[not with type=submit]. It is working great on textarea, and buttons[not with type=submit] but it is not working with select(dropdown).

2. I found out that this script failed to move to next input when passing a disabled input. For example I have three input, qty, qtyConv and memo. all of them are textfields, but qtyConv is disabled. When I am in qty and I press enter, I could not move to memo.

Any help to improve this script to meet my requirements?

Thank you in advance.

Daniel

Solution: use keydown instead of keypress as suggested by Nitish Dhar.

Answer 1

Couple of things -

1. Selector being used is wrong. The selector defined is wrong in terms of looking for the not disabled ones, use this one instead -

    $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])"); 

2. Firefox 29.0 has a bug with keypress on select inputs, use keydown instead - Select is not working for you in firefox due to a bug (or not a bug) where they don't listen to keypress when its on a select input - https://support.mozilla.org/en-US/questions/998291 .

WORKING DEMO - http://codepen.io/nitishdhar/pen/Gxbhm (works in chrome & FF as well)

Complete Code

(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        $(this).find('input, select, textarea, button').live("keydown", {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);

$("#form").enterAsTab({ 'allowSubmit': true});