在不改变焦点的情况下,在文本区域内选项卡,jQuery

Question

给定一个textarea,有没有办法使用jQuery来启用人们使用"tab"键的能力,实际上..插入一个标签,而不是将焦点跳到页面上的下一个表单元素？

我已经在文本框中跟踪捕获TAB键,虽然这确实有效,但我希望尝试将其包装成一个jQuery插件,以使特定的文本框可以列表.问题是,我并不完全理解如何将这些"监听器"的概念应用于与jQuery相对应的对象.

有没有人在我可以开始的地方有一些线索？

Answer 1

我刚刚编写了一个jQuery插件,可以在所有主流浏览器中使用.它使用keydown和keypress将事件侦听器绑定到一组元素.事件侦听器会阻止Tab键的默认行为,而keydown侦听器也会在插入符/选择中手动插入制表符.

这是在行动:http://www.jsfiddle.net/8segz/

这是一个使用示例:

$(function() {
    $("textarea").allowTabChar();
});

这是插件代码:

(function($) {
    function pasteIntoInput(el, text) {
        el.focus();
        if (typeof el.selectionStart == "number") {
            var val = el.value;
            var selStart = el.selectionStart;
            el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
            el.selectionEnd = el.selectionStart = selStart + text.length;
        } else if (typeof document.selection != "undefined") {
            var textRange = document.selection.createRange();
            textRange.text = text;
            textRange.collapse(false);
            textRange.select();
        }
    }

    function allowTabChar(el) {
        $(el).keydown(function(e) {
            if (e.which == 9) {
                pasteIntoInput(this, "\t");
                return false;
            }
        });

        // For Opera, which only allows suppression of keypress events, not keydown
        $(el).keypress(function(e) {
            if (e.which == 9) {
                return false;
            }
        });
    }

    $.fn.allowTabChar = function() {
        if (this.jquery) {
            this.each(function() {
                if (this.nodeType == 1) {
                    var nodeName = this.nodeName.toLowerCase();
                    if (nodeName == "textarea" || (nodeName == "input" && this.type == "text")) {
                        allowTabChar(this);
                    }
                }
            })
        }
        return this;
    }
})(jQuery);