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

StackOverflow https://stackoverflow.com/questions/3362

  •  08-06-2019
  •  | 
  •  

题

我希望能够使用 标签 在文本框中键入 键可跨过四个空格。现在的情况是，Tab 键将光标跳到下一个输入。

是否有一些 JavaScript 可以在文本框中的 Tab 键浮现到 UI 之前捕获它？

我了解一些浏览器（即FireFox）可能不允许这样做。自定义组合键怎么样 转移+标签, ， 或者 控制键+问?

有帮助吗？

解决方案

即使你捕捉到了 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>

其他提示

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

如果您想缩进在 Markdown 框中输入代码，请使用 控制键+K （或在 Mac 上按 ⌘K）。

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

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

我建议不要更改密钥的默认行为。我尽可能不碰鼠标，所以如果你让我的 Tab 键不移动到表单上的下一个字段，我会非常恼火。

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

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

在 Mac 上的 Chrome 中，alt-tab 将制表符插入到 <textarea> 场地。

这是一个：。威！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top