题
我希望能够使用 标签 在文本框中键入 键可跨过四个空格。现在的情况是,Tab 键将光标跳到下一个输入。
是否有一些 JavaScript 可以在文本框中的 Tab 键浮现到 UI 之前捕获它?
我了解一些浏览器(即FireFox)可能不允许这样做。自定义组合键怎么样 转移+标签, , 或者 控制键+问?
解决方案
即使你捕捉到了 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>
其他提示
我宁愿制表符缩进不起作用,也不愿破坏表单项之间的制表符。
如果您想缩进在 Markdown 框中输入代码,请使用 控制键+K (或在 Mac 上按 ⌘K)。
就实际停止操作而言,当您从事件回调返回 false 时,jQuery(Stack Overflow 使用)将停止事件冒泡。这使得使用多个浏览器的工作更加轻松。
前面的答案很好,但我是坚决反对将行为与表示混合在一起的人之一(将 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
}
}
我建议不要更改密钥的默认行为。我尽可能不碰鼠标,所以如果你让我的 Tab 键不移动到表单上的下一个字段,我会非常恼火。
然而,快捷键可能很有用,特别是对于大型代码块和嵌套。Shift-TAB 是一个糟糕的选择,因为它通常会将我带到表单上的上一个字段。也许 WMD 编辑器上有一个新按钮可以插入代码选项卡,并带有快捷键?
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>
场地。
这是一个:。威!