在文本框中捕获TAB键

我想能够在一个文本框中使用Tab键来标签四个空格。 现在,Tab键跳转到下一个input。

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

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

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

我宁愿select缩进不工作,而不是打破表单项之间的选项卡。

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

就实际停止的行动而言,jQuery(Stack Overflow使用的)会在从事件callback中返回false时停止冒泡事件。 这使得多个浏览器的工作变得更容易。

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

我会build议不要改变一个键的默认行为。 我尽可能地不触摸鼠标,所以如果你让我的标签键不移动到一个窗体上的下一个领域,我将会变得非常严重。

但是,快捷键可能很有用,尤其是对于大型代码块和嵌套。 Shift-TAB是一个不好的select,因为它通常把我带到一个窗体上的前一个字段。 也许WMD编辑器上的一个新button可以用快捷键插入代码TAB?

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

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

这是一个:。 凌晨!