用户按Enter键时如何触发Tab

时间:2014-05-27 10:54:16

标签: javascript jquery

我从这里获得了代码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);

我的问题是:

  1. 我希望这个脚本也适用于select(下拉列表),textarea,按钮[不带type = submit]。它在textarea和按钮[不是类型=提交]上工作得很好但是它不能用于选择(下拉列表)。

  2. 我发现在传递禁用的输入时,此脚本无法移动到下一个输入。例如,我有三个输入,qty,qtyConv和备忘录。所有这些都是文本字段,但qtyConv被禁用。当我在数量上并按下回车时,我无法转到备忘录。

  3. 有任何帮助来改进此脚本以满足我的要求吗?

    提前谢谢。

    丹尼尔

    解决方案:根据Nitish Dhar的建议使用keydown而不是按键。

1 个答案:

答案 0 :(得分:9)

一些事情 -

  1. 选择器使用错误。在查找未禁用的选择器方面定义的选择器是错误的,而是使用此选项 -

    $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])"); 
    
  2. Firefox 29.0 在选择输入时出现错误,使用keydown - 在Firefox中选择不起作用由于一个错误(或者不是一个错误),当它在选择的输入上时,他们不会听按键 - https://support.mozilla.org/en-US/questions/998291

  3. 工作演示 - http://codepen.io/nitishdhar/pen/Gxbhm(也适用于chrome& FF)

    完整代码

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