捕获文本框中的TAB键
我希望能够在文本框中使用" Tab"键在四个空格之间切换。现在,Tab键将光标跳到下一个输入。
是否有一些JavaScript可以在气泡进入UI之前捕获文本框中的Tab键?
我了解某些浏览器(例如FireFox)可能不允许这样做。像Shift + Tab或者Ctrl + Q这样的自定义组合键怎么样?
解决方案
回答
上一个答案很好,但是我是坚决反对将行为与表示混合在一起(将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 } }
回答
我宁愿制表符缩进也不起作用,而不是打破表单项之间的制表符。
如果我们想缩进代码以在Markdown框中放入代码,请使用Ctrl + K(在Mac上为?K)。
在实际停止操作方面,当我们从事件回调返回false时,jQuery(Stack Overflow使用)将阻止事件冒泡。这使使用多个浏览器的工作变得更轻松。
回答
我建议不要更改键的默认行为。我在不触摸鼠标的情况下做了尽可能多的操作,因此,如果我们使我的Tab键不移到表格的下一个字段,我会感到非常沮丧。
但是,快捷键可能很有用,尤其是在大型代码块和嵌套的情况下。 Shift-TAB是一个错误的选择,因为通常这会将我带到表单的上一个字段。也许可以在WMD编辑器上使用新按钮插入带有快捷键的代码TAB吗?
回答
即使捕获了" 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>
回答
在Mac上的Chrome中,alt-tab会将制表符插入到<textarea>字段中。
继承人之一:。 e!
回答
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将更新代码