Как вызвать вкладку, когда пользователь нажимает Enter

Я получил код отсюда jquery, как поймать клавишу ввода и изменить событие на вкладку

(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, кнопку [not with type=submit]. Он отлично работает с textarea и кнопками [не с type = submit], но не работает с select (выпадающий список).

  2. Я обнаружил, что этот сценарий не может перейти к следующему вводу при передаче отключенного ввода. Например, у меня есть три input, qty, qtyConv и memo. все они являются текстовыми полями, но qtyConv отключен. Когда я нахожусь в кол-во и нажимаю ввод, я не могу перейти к заметке.

Любая помощь, чтобы улучшить этот скрипт для удовлетворения моих требований?

Заранее спасибо.

Даниил

Решение: используйте нажатие клавиши вместо нажатия клавиши, как предложено Нитиш Дхаром.

1 ответ

Решение

Пара вещей -

  1. Используемыйселектор неверен. Определенный селектор неверен с точки зрения поиска не отключенных, используйте этот вместо -

    $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])"); 
    
  2. В Firefox 29.0 есть ошибка с нажатием клавиши на выбранных входах, вместо этого используйте keydown - Select не работает для вас в Firefox из-за ошибки (или не ошибки), когда они не слушают нажатие клавиш, когда на входе select - https://support.mozilla.org/en-US/questions/998291.

WORKING DEMO - 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});
Другие вопросы по тегам