在 textarea 字段中使用“选项卡”答案

【问题标题】：Use "tabs" in textarea field在 textarea 字段中使用“选项卡”
【发布时间】：2010-07-04 15:33:42
【问题描述】：

是否可以使用 javascript 在 textarea 中使用“制表符”（缩进）。单击选项卡按钮时，将聚焦下一个表单元素。但是，我需要缩进 textarea 中的文本。

我目前正在从事一个项目，任何带有 javascript 或 jquery 的代码都会对我有所帮助。

【问题讨论】：

有许多脚本可以做到这一点，但我会谨慎使用它们。这里是one，这里是another。
@Mike 你为什么要小心？
@chromedude：我会小心，因为使用 tab 键在文本区域产生缩进会覆盖大多数浏览器中 tab 键的正常功能，即将焦点移动到下一个字段或链接。因此，它可能会导致可访问性问题。

【解决方案1】：

我见过的最好的插件是Tabs in Textarea plugin。你可以试试演示on its page。

设置相当简单，因为它有一个简单的效果：

$("textarea").tabby();

其他插件最让我烦恼的是缺少 shift+tab，它可以处理。您可以在没有插件的情况下执行此操作，但在这种情况下我不会...您自己需要编写相当多的代码，具体取决于您所追求的功能。跨浏览器方式的 TextRange 操作在幕后仍然有点麻烦，这是 IMO 插件是更好方法的时代之一。

【讨论】：

【解决方案2】：

这样的事情怎么样：

<input onkeypress="if(event.keyCode == 9) { this.value += '    '; return false; }">

基本上，当您按下 keyCode 9（即 Tab 键）时，我会返回 false。这可以防止在页面上聚焦另一个元素。

为了模仿 Tab 空格，我只是自己将空格添加到输入本身的值中。

【讨论】：

【解决方案3】：

试试这个：在按键事件中捕获 tab 键并停止传播。我不确定这是否会在浏览器中始终如一地工作；试试看！

【讨论】：