Question

我希望能够在文本框中使用 Tab 键来标记四个空格。现在的方式，Tab键将我的光标跳到下一个输入。

是否有一些JavaScript会在文本框中出现Tab键之前捕获Tab键？

据我所知，某些浏览器（即FireFox）可能不允许这样做。如何自定义键组合如 Shift + Tab ，或 Ctrl + Q ？

Answer 1

即使您捕获keydown / keyup事件，这些是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>

Answer 2

我更倾向于缩进缩进而不是打破表单项之间的标签。

如果要缩进以在Markdown框中输入代码，请使用 Ctrl + K （或Mac上的⌘K）。

就实际停止操作而言，当您从事件回调中返回false时，jQuery（Stack Overflow使用）将阻止事件冒泡。这使得使用多个浏览器的生活更轻松。

Answer 3

之前的答案很好，但我是那些坚决反对将行为与演示混合在一起的人之一（将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
  }
}

Answer 4

我建议不要更改密钥的默认行为。我尽可能不触摸鼠标，所以如果你让我的tab键没有移动到表格上的下一个字段，我会非常恶化。

然而，快捷键可能很有用，尤其是对于大型代码块和嵌套。 Shift-TAB是一个糟糕的选择，因为它通常会将我带到表单上的前一个字段。也许WMD编辑器上的一个新按钮可以插入带有快捷键的代码-TAB？

Answer 5

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能够更新代码

Answer 6

在Mac上的Chrome中，alt选项卡会在<textarea>字段中插入制表符。

这是一个：。嫣！

在文本框中捕获TAB键

6 个答案: