javascript -在文本框中捕获选项卡

Translate

我希望能够使用标签在文本框内键入四个选项卡。现在,Tab键将光标跳到下一个输入。

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

我了解某些浏览器(即FireFox)可能不允许这样做。像这样的自定义按键组合怎么样转移+标签, 要么Ctrl+Q?

This question and all comments follow the "Attribution Required."

所有的回答

Translate

即使您捕获了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>
来源
Translate

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

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

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

来源
Tom
Translate

前面的答案很好,但是我是坚决反对将行为与表示混合在一起(将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
  }
}
来源
Translate

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

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

来源
Translate

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

来源
Translate

在Mac上的Chrome中,alt-tab会将制表符插入到<textarea>领域。

这是一个:。 e!

来源