我希望在文本框内使用 Tab 键来缩进四个空格。现在的情况是,按下 Tab 键会跳到下一个输入框。
有没有一些 JavaScript 可以在 Tab 键到达 UI 之前捕获它并在文本框中使用呢?
我知道有些浏览器(如 FireFox)可能不允许此操作。那么像 Shift+Tab 或 Ctrl+Q 这样的自定义键组合怎么样?
我希望在文本框内使用 Tab 键来缩进四个空格。现在的情况是,按下 Tab 键会跳到下一个输入框。
有没有一些 JavaScript 可以在 Tab 键到达 UI 之前捕获它并在文本框中使用呢?
我知道有些浏览器(如 FireFox)可能不允许此操作。那么像 Shift+Tab 或 Ctrl+Q 这样的自定义键组合怎么样?
即使您捕获了 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>
keycode
8
再次删除空格? - yckart我宁愿制表符缩进不起作用,也不要破坏表单项之间的制表。
如果您想在Markdown框中缩进以放置代码,请使用 Ctrl + K (或Mac上的⌘K)。
实际上停止操作方面,jQuery( Stack Overflow 所使用的)将在事件回调函数返回false时阻止事件冒泡。这使得在处理多个浏览器时更加容易。
前面的答案不错,但我是那种坚决反对将行为与表示混合起来(在我的HTML中放置JavaScript)的人,因此我更喜欢将我的事件处理逻辑放在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编辑器上添加一个新按钮来插入代码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 */
}