捕获文本框中的TAB键[关闭]

100

我希望能够使用Tab文本框中的键在四个空格之间切换。现在，Tab键将光标跳到下一个输入。

是否有一些JavaScript可以在气泡进入UI之前捕获文本框中的Tab键？

我了解某些浏览器（即FireFox）可能不允许这样做。像Shift+ Tab或Ctrl+ 这样的自定义按键组合怎么样Q？

javascript user-interface

— 塞巴尔
source

不要忘记检查聚焦窗口，如果您不在编辑器文本区域中，请使其正常冒泡。

— FlySwat

帖子被主持人标记为“属于meta.stackoverflow.com”，但已有2年以上的历史，因此我不打算迁移。

— 罗伯特·哈维

108

即使捕获了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>

— 斯科特·昆
source

1

我刚刚将第4行从“ if（el.attachEvent）”更正为“ if（myInput.attachEvent）”

— Fenton 2010年

请注意，此代码仅在末尾添加TAB。在大多数情况下不方便。

— 亚历山大·帕拉玛丘克

@SteveFenton是否有一种简单的方法可以再次删除空格keycode 8？

— yckart

18

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

如果您想缩进代码，在Markdown框中，请使用Ctrl+ K（在Mac上为⌘K）。

在实际停止操作方面，当您从事件回调返回false时，jQuery（Stack Overflow使用）将阻止事件冒泡。这使使用多个浏览器的工作变得更轻松。

— 劳伦
source

13

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

document.onkeydown = TabExample;

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

— 汤姆
source

6

我建议不要更改键的默认行为。我在不触摸鼠标的情况下做了尽可能多的操作，因此，如果您使我的Tab键不移到表格的下一个字段，我会感到非常沮丧。

但是，快捷键可能很有用，尤其是在大型代码块和嵌套的情况下。Shift-TAB是一个错误的选择，因为通常这会将我带到表单的上一个字段。也许可以在WMD编辑器上使用新按钮来插入带有快捷键的代码TAB吗？

— 沃利无法无天
source

1

问题完全取决于应用程序。我正在使用代码编辑器控件。我没有提供Tab键，我的学生们都抱怨。我不是因为我不想打破我一位盲人学生的可及性。现在，我添加了选项卡支持，还提供了用户首选项以将其关闭。

— 查尔斯（Charles）

@Charles关于可访问性的含义非常好。

— Wally Lawless 2015年

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
source

3

在Mac上的Chrome中，alt-tab会在<textarea>字段中插入一个制表符。

这是一个：。e！

— 保罗·D·威特
source