在文本框中捕获TAB键

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

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

我了解一些浏览器(即FireFox)可能不允许这样做。像 Shift + TabCtrl + Q 这样的自定义组合键怎么样?

0
额外 编辑
意见: 1
这个帖子得到了主持人,被标记为“属于上meta.stackoverflow.com,”但它是在二十岁,所以我不迁移它。
额外 作者 Robert Harvey,
不要忘记检查聚焦的窗口,如果你不在编辑器textarea中,让它正常冒泡。
额外 作者 FlySwat,

6 答案

我会建议不要更改密钥的默认行为。我尽可能地不触摸鼠标,所以如果你让我的标签键不能移动到表格上的下一个字段,我会变得非常严重。

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

0
额外
@Charles关于可访问性的含义非常好。
额外 作者 Wally Lawless,
这个问题完全取决于应用程序。我正在研究代码编辑器控件。我没有提供Tab键,我的学生都抱怨。我没有,因为我不想为我失明的一名学生打破无障碍环境。我现在添加了标签支持,但也提供了一个用户首选项来关闭它。
额外 作者 Charles,

In Chrome on the Mac, alt-tab inserts a tab character into a

这里有一个:。凌晨!

0
额外

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

我宁愿缩进缩进不工作比打破表单项之间的tab。

如果您想要在缩减框中输入代码,请使用 Ctrl + K (或Mac上的?K)。

就实际停止动作而言,当您从事件回调中返回false时,jQuery(Stack Overflow使用)将停止冒泡事件。这使得使用多个浏览器更轻松。

0
额外

即使您捕获了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>
0
额外
@SteveFenton是否有一种简单的方法可以用 keycode 8 再次删除空格?
额外 作者 yckart,
我刚刚纠正了第4行,从“if(el.attachEvent)”到“if(myInput.attachEvent)”
额外 作者 Fenton,
注意这个代码只在最后添加了TAB。这在大多数场合很不方便。
额外 作者 Alexander Palamarchuk,

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

0
额外