在 Textareas 中支持 Tab 键 | CSS-Tricks

通常 Tab 键会将焦点移动到下一个可聚焦的元素。这将改为插入一个制表符字符。

HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
    return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
    this.selectionStart = position;
    this.selectionEnd = position;
    this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
    if (this.selectionStart == this.selectionEnd) {
        return false;
    } else {
        return true;
    }
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
    return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
    this.selectionStart = start;
    this.selectionEnd = end;
    this.focus();
};

var textarea = document.getElementsByTagName('textarea')[0]; 

textarea.onkeydown = function(event) {
    
    //support tab on textarea
    if (event.keyCode == 9) { //tab was pressed
        var newCaretPosition;
        newCaretPosition = textarea.getCaretPosition() + "    ".length;
        textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + "    " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
        textarea.setCaretPosition(newCaretPosition);
        return false;
    }
    if(event.keyCode == 8){ //backspace
        if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
            var newCaretPosition;
            newCaretPosition = textarea.getCaretPosition() - 3;
            textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
            textarea.setCaretPosition(newCaretPosition);
        }
    }
    if(event.keyCode == 37){ //left arrow
        var newCaretPosition;
        if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
            newCaretPosition = textarea.getCaretPosition() - 3;
            textarea.setCaretPosition(newCaretPosition);
        }    
    }
    if(event.keyCode == 39){ //right arrow
        var newCaretPosition;
        if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
            newCaretPosition = textarea.getCaretPosition() + 3;
            textarea.setCaretPosition(newCaretPosition);
        }
    } 
}

João Colombo

# 2012 年 5 月 14 日

我提交了这段代码以允许开发人员操纵 textarea 的选择和光标位置，而不是为了支持 Tab 键。

Tab 键支持只是一个示例，此外您不需要所有这些代码来支持 Tab 键，只需使用前两种方法： http://jsfiddle.net/joaocolombo/wWk4x/

参考 URL 是错误的，以下是正确的 URL。

Robin

# 2012 年 5 月 14 日

这是一个很酷的功能，但我不会推荐这样做。

最主要的原因是：您正在改变默认的浏览器行为。

在您完成 textarea 后如何切换到下一个表单元素？使用鼠标？我个人讨厌在填写表单时无法使用 Tab 键。当我在键盘上时，我就在键盘上。我不想在填写表单时在键盘和鼠标之间切换。

Jesse

评论永久链接# 2014 年 1 月 1 日

这取决于您构建的是什么。WordPress 主题的后台自定义 CSS 区域，或者像 snippi 这样的代码片段网站，就是这种功能很实用的例子。我的 2 美分。

Luke

# 2012 年 11 月 27 日

@Robin
此功能并非适用于具有多个输入的表单，而是适用于类似博客或单输入表单的内容。它是您唯一需要操作的元素，比如 Markdown 或类似的东西。如果您经常使用 Markdown，如果每次都需要按 4 次空格键，您会疯掉的。在所有其他表单中，您当然不会使用它。为什么您要在这样的评论窗口中使用 Tab 键，这毫无意义。

顺便说一下...您可以实现一个功能，双击 Tab 键可以切换到下一个输入。

Taufik Nurrohman

# 2013 年 1 月 5 日

最简单的

function enableTab(id) {
    var el = document.getElementById(id);
    el.onkeydown = function(e) {
        if (e.keyCode === 9) { // tab was pressed

            // get caret position/selection
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;

            // set textarea value to: text before caret + tab + text after caret
            this.value = val.substring(0, start) + '\t' + val.substring(end);

            // put caret at right position again
            this.selectionStart = this.selectionEnd = start + 1;

            // prevent the focus lose
            return false;

        }
    };
}

用法：enableTab('textarea-id'); ⇒ DEMO

mnmenth

评论永久链接# 2016 年 6 月 30 日

它工作得很好。我喜欢最简单的。

Clement

# 2013 年 2 月 4 日

@Luke，我会给你举一个必须使用制表符的例子。想象一下，您有一个地方需要让用户插入/输入源代码，这些代码稍后会由 CodeMirror 进行转换和着色，并插入 WYSISYG 编辑器或其他地方。在没有制表符的情况下输入代码会真的让人崩溃。

Stick

# 2014 年 3 月 17 日

请原谅我的无知 - 为什么我们不直接插入 \t？CSS 可以用来设置制表符宽度，所以除非我遗漏了什么细节（完全有可能），否则似乎我们应该使用转义字符…

Sergey

# 2015 年 10 月 5 日

:( 它不支持多行多制表符

Marc

# 2017 年 5 月 31 日

还有一个问题。撤销（Ctrl-z）无法正常工作。

评论

发表回复 取消回复

发表回复取消回复