在文本区域内制表而不改变焦点，jQuery答案

【问题标题】：Tab within a text area without changing focus, jQuery在文本区域内制表而不改变焦点，jQuery
【发布时间】：2011-05-21 17:47:16
【问题描述】：

给定一个 textarea，有没有办法使用 jQuery 让人们能够使用“tab”键来插入一个选项卡，而不是将焦点跳转到页面上的下一个表单元素？

我已经关注Capturing TAB key in text box，虽然这确实有效，但我希望尝试将其包装到一个 jQuery 插件中，以使特定的文本框可选项卡。问题是，我并不完全理解如何将这些“侦听器”的概念应用于与 jQuery 对应的对象。

有人知道我可以从哪里开始吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

让你的插件做这样的事情：

$(inputElementSelector).keypress(function(event) {
    if (event.keyCode == 9) {
        //enter your tab behavior here
    }
}

【讨论】：

【解决方案2】：

我刚刚编写了一个 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);

【讨论】：

你在糟糕的一天就像胡椒博士。这太棒了。
不错的sn-p。我知道已经 4 年了，但是......你会如何将该操作添加到撤消历史记录中？浏览器似乎不允许使用此代码撤消无意的选项卡。此外，对于div[contenteditable]，该元素似乎没有定义selectionStart 或document.selection。 “contenteditable”是否有解决方法？你知道有没有更充实的插件？提前致谢。

【解决方案3】：

向此函数传递一个 jQuery 选择器，该选择器与您要在其中启用 Tab 字符的元素相匹配。例如：BindTabKeyAsCharacter(".about_us textarea");

function BindTabKeyAsCharacter(selector) {
    $(document).ready(function () {
        $(selector).each(function () {
            $(this).keydown(function () {
                var e = (window.event) ? event : e;
                if (e.keyCode == 9) { // Tab
                    if (window.event) {
                        window.event.returnValue = false;
                    }
                    else {
                        if (e.cancelable) { e.preventDefault(); }
                    }
                    var before, after;
                    if (document.selection) {
                        this.selection = document.selection.createRange();
                        this.selection.text = String.fromCharCode(9);
                    } else {
                        before = this.value.substring(0, this.selectionStart);
                        after = this.value.substring(this.selectionEnd,     this.value.length);
                        this.value = before + String.fromCharCode(9) + after;
                    }
                    var newCursorPos = before.length + String.fromCharCode(9).length;
                    if (this.setSelectionRange) {
                        this.focus();
                        this.setSelectionRange(newCursorPos, newCursorPos);
                    } else if (this.createTextRange) {
                        var range = this.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', newCursorPos);
                        range.moveStart('character', newCursorPos);
                        range.select();
                    }
                }
            });
        });
    });
}

【讨论】：

【解决方案4】：

试试这个简单的 jQuery 函数：

$.fn.getTab = function () {
    this.keydown(function (e) {
        if (e.keyCode === 9) {
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;
            this.value = val.substring(0, start) + '\t' + val.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
            return false;
        }
        return true;
    });
    return this;
};

$("textarea").getTab();
// You can also use $("input").getTab();

【讨论】：

【解决方案5】：

致Tim Down 的代码：我在我的项目中使用它并遇到了一个奇怪的错误。当我在一行的开头插入一个简单的空格时，提交后内容不会更新。我的 textareas 项目中有很多 jQuery 和 Ajax 代码。但是 preventDefault() 解决了我的错误：

...
function allowTabChar(el) {
    $(el).keydown(function(e) {
        if (e.which == 9) {
            pasteIntoInput(this, \"\t\");
            e.preventDefault();  // <- I had to add this
            $(el).change();      // To fire change event for my Ajax Code
            return false;
        }
    });
 ...

【讨论】：