捕获标签键在文本框

I would like to be able to use the Tab key within the a text box to tab over four spaces. The way it is now, the Tab key jumps my cursor to the next input.

我希望能够使用文本框中的选项卡键在四个空格上进行选项卡。按现在的方式，Tab键将光标跳到下一个输入。

Is there some JavaScript that will capture the Tab key in the text box before it bubbles up to the UI?

是否有一些JavaScript会在文本框中的Tab键冒泡到UI之前捕获它?

I understand some browsers (i.e. FireFox) may not allow this. How about a custom key-combo like Shift+Tab, or Ctrl+Q?

我知道有些浏览器(比如FireFox)可能不允许这样做。像Shift+Tab或Ctrl+Q这样的定制键组合怎么样?

6 个解决方案

#1

Even if you capture the keydown/keyup event, those are the only events that the tab key fires, you still need some way to prevent the default action, moving to the next item in the tab order, from occurring.

即使您捕获了keydown/keyup事件，这些都是选项卡键触发的惟一事件，您仍然需要某种方法来防止默认操作(按照选项卡顺序移动到下一个项)发生。

In Firefox you can call the preventDefault() method on the event object passed to your event handler. In IE, you have to return false from the event handle. The JQuery library provides a preventDefault method on its event object that works in IE and FF.

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

#2

I'd rather tab indentation not work than breaking tabbing between form items.

我宁愿标签缩进不起作用，也不愿意在表单项之间打破标签。

If you want to indent to put in code in the Markdown box, use Ctrl+K (or ⌘K on a Mac).

如果你想缩进的代码在减价框,使用Ctrl + K(或⌘K Mac)。

In terms of actually stopping the action, jQuery (which Stack Overflow uses) will stop an event from bubbling when you return false from an event callback. This makes life easier for working with multiple browsers.

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

#3

The previous answer is fine, but I'm one of those guys that's firmly against mixing behavior with presentation (putting JavaScript in my HTML) so I prefer to put my event handling logic in my JavaScript files. Additionally, not all browsers implement event (or e) the same way. You may want to do a check prior to running any logic:

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

#4

I would advise against changing the default behaviour of a key. I do as much as possible without touching a mouse, so if you make my tab key not move to the next field on a form I will be very aggravated.

我建议不要改变键的默认行为。我尽量不碰鼠标，所以如果你让我的tab键不移动到下一个字段，我将会非常恼火。

A shortcut key could be useful however, especially with large code blocks and nesting. Shift-TAB is a bad option because that normally takes me to the previous field on a form. Maybe a new button on the WMD editor to insert a code-TAB, with a shortcut key, would be possible?

但是，一个快捷键可能是有用的，特别是对于大型代码块和嵌套。Shift-TAB是一个糟糕的选项，因为它通常会将我带到表单上的前一个字段。也许可以在WMD编辑器上添加一个带有快捷键的代码标签?

#5

there is a problem in best answer given by ScottKoon

ScottKoon给出的最佳答案中有一个问题

here is it

这是它

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Should be

应该是

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Due to this it didn't work in IE. Hoping that ScottKoon will update code

由于这个原因，它在IE中不起作用。希望ScottKoon能够更新代码

#6

In Chrome on the Mac, alt-tab inserts a tab character into a <textarea> field.

在Mac上的Chrome中，alt-tab将一个制表符插入到字段中。</p>

Here’s one: . Wee!

这是一个:。喂!

#1