在文本框中捕获TAB键

Question

在文本框中捕获TAB键

javascriptuser-interface

110

我希望在文本框内使用 Tab 键来缩进四个空格。现在的情况是，按下 Tab 键会跳到下一个输入框。

有没有一些 JavaScript 可以在 Tab 键到达 UI 之前捕获它并在文本框中使用呢？

我知道有些浏览器（如 FireFox）可能不允许此操作。那么像 Shift+Tab 或 Ctrl+Q 这样的自定义键组合怎么样？

- Seibar

不要忘记检查聚焦窗口，如果你不在编辑器文本区域，则让它正常冒泡。 - FlySwat

这篇帖子被管理员标记为“应该发布在meta.stackoverflow.com上”，但它已经超过两年了，所以我不会迁移它。 - Robert Harvey

6个回答

18

我宁愿制表符缩进不起作用，也不要破坏表单项之间的制表。

如果您想在Markdown框中缩进以放置代码，请使用 Ctrl + K (或Mac上的⌘K)。

实际上停止操作方面，jQuery( Stack Overflow 所使用的)将在事件回调函数返回false时阻止事件冒泡。这使得在处理多个浏览器时更加容易。

- Lauren

13

前面的答案不错，但我是那种坚决反对将行为与表示混合起来（在我的HTML中放置JavaScript）的人，因此我更喜欢将我的事件处理逻辑放在JavaScript文件中。此外，并非所有浏览器都以相同的方式实现事件（或e）。在运行任何逻辑之前，可能需要进行检查：

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

- Tom

6

我建议不要更改键的默认行为。我尽可能地避免使用鼠标，因此如果您让我的Tab键不会在表单上移动到下一个字段，我会非常恼火。

快捷键可能很有用，特别是在大型代码块和嵌套中。Shift-TAB是一个糟糕的选项，因为它通常会将我带回到表单上的上一个字段。也许在WMD编辑器上添加一个新按钮来插入代码TAB，并提供一个快捷键，这是可能的吗？

- Wally Lawless

1

这个问题完全取决于应用程序。我正在开发一个代码编辑器控件。我没有提供Tab键，我的学生们都抱怨了。我之所以没有提供是因为我不想破坏我的一个盲人学生的可访问性。现在我已经添加了Tab支持，但也提供了一个用户首选项选项来关闭它。 - Charles

@Charles非常好的一点是关于可访问性方面的影响。 - Wally Lawless

@Charles，你能详细说明一下如何添加Tab键支持会影响盲人用户的可访问性吗？这是因为一些盲人用户依赖Tab键来转移焦点，就像这个答案所描述的那样吗？ - Vectornaut

4

ScottKoon给出的最佳答案存在问题。

以下是具体内容：

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

应该是

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

由于这个原因，它在IE浏览器中不能工作。希望ScottKoon能更新代码。

- chintan123

4

在Mac上的Chrome中，alt-tab会将一个制表符插入到\

- Paul D. Waite

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottKoon · Accepted Answer

即使您捕获了 keydown/keyup 事件，这些事件也是tab键触发的唯一事件，您仍然需要某种方法来防止默认操作（按Tab键时移动到下一个可选项），不会发生。

在Firefox中，您可以在传递给事件处理程序的事件对象上调用preventDefault()方法。在IE中，您必须从事件处理程序返回false。JQuery库提供了一个 preventDefault 方法，在 IE 和 FF 中都可以使用。

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>