在文本框中捕获TAB键

yvitae 发布于 2018-02-27 javascript 最后更新 2018-02-27 01:05 626 浏览

我希望能够在文本框中使用 Tab 键来标记四个空格。现在,Tab键会将光标跳转到下一个输入。 是否有一些JavaScript会在文本框中出现UI之前捕获Tab键? 我了解一些浏览器(即FireFox)可能不允许这样做。像 Shift + Tab Ctrl + Q 这样的自定义组合键怎么样?

已邀请:

ket

赞同来自:

以前的答案很好,但我是那些坚决反对混合行为与演示文稿(将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
  }
}

et_et

赞同来自:

我宁愿缩进缩进不工作比打破表单项之间的tab。 如果您想要在缩减框中输入代码,请使用 Ctrl + K (或Mac上的⌘+ K)。 就实际停止动作而言,当您从事件回调中返回false时,jQuery(Stack Overflow使用)将停止冒泡事件。这使得使用多个浏览器更轻松。

zcum

赞同来自:

我会建议不要更改密钥的默认行为。我尽可能地不触摸鼠标,所以如果你让我的标签键不能移动到表格上的下一个字段,我会变得非常严重。 然而,快捷键可能很有用,尤其是对于大型代码块和嵌套。 Shift-TAB是一个不好的选择,因为它通常将我带到表单上的前一个字段。也许WMD编辑器上的一个新按钮可以用快捷键插入代码选项卡?

rvero

赞同来自:

即使您捕获了keydown/keyup事件,这些也是tab键触发的唯一事件,但您仍然需要某种方法来防止默认操作,从Tab键顺序移动到下一个项目。 在Firefox中,您可以调用传递给事件处理程序的事件对象的preventDefault()方法。在IE中,你必须从事件句柄返回false。 JQuery库为其IE和FF中的事件对象提供了一个preventDefault方法。

<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>

nqui

赞同来自:

在Mac上的Chrome中,alt-tab将制表符插入到<textarea>字段中。 这是一个:。凌晨!

set

赞同来自:

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