代码之家 › 专栏 › 技术社区 › Seibar

在文本框中捕获tab键[关闭]

user-interface javascript

Seibar · 技术社区 · 18 年前

我想能用 标签 在文本框中输入键,可在四个空格上加制表符。按照现在的方式,tab键将我的光标跳到下一个输入。

在文本框冒泡到用户界面之前,是否有一些javascript可以捕获文本框中的tab键?

我知道有些浏览器(如火狐)可能不允许这样做。自定义组合键怎么样 换档 + 标签 或 Ctrl键 + Q ?

6 回复 | 直到 7 年前

Vadim H 8 年前

即使你抓住了 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>

Naveed S 13 年前

我宁愿标签缩进不起作用,也不想破坏表单项之间的标签。

如果要缩进以放入标记框中的代码,请使用 Ctrl键 + K (或Mac上的k)。

就实际停止操作而言,当从事件回调返回false时,jquery(堆栈溢出使用的)将阻止事件冒泡。这使得使用多个浏览器更容易。

Munawir 9 年前

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

geocoin 18 年前

我建议不要更改密钥的默认行为。我尽量不碰鼠标,所以如果你让我的tab键不移到窗体上的下一个字段,我会非常恼火。

然而,快捷键可能很有用,特别是对于大型代码块和嵌套。“移位”选项卡是一个错误的选项,因为这通常会将我带到窗体上的前一个字段。也许可以在WMD编辑器上使用快捷键插入代码选项卡的新按钮?

Danilo Valente 13 年前

斯科特孔给出的最佳答案有问题。

这是它

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

Paul D. Waite 16 年前

在Mac上的Chrome中,alt tab将制表符插入 <textarea> 字段。

这里有一个。哇!