在文本框中捕获 TAB 键 [关闭]
Posted
技术标签:
【中文标题】在文本框中捕获 TAB 键 [关闭]【英文标题】：Capturing TAB key in text box [closed] 【发布时间】：2010-09-05 10:12:34 【问题描述】：我希望能够在文本框中使用 Tab 键来制表四个空格。现在的方式是，Tab 键将我的光标跳转到下一个输入。
是否有一些 javascript 会在文本框中的 Tab 键冒泡到 UI 之前捕获它？
我了解某些浏览器（例如 FireFox）可能不允许这样做。像 Shift+Tab 或 Ctrl+Q 这样的自定义组合键怎么样？
【问题讨论】：
不要忘记检查焦点窗口，如果你不在编辑器文本区域中，让它正常冒泡。 这篇文章被版主标记为“属于 meta.***.com”，但它已有两年多了，所以我没有迁移它。 【参考方案1】：即使您捕获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>
【讨论】：
我刚刚更正了第 4 行，从“if (el.attachEvent)”到“if (myInput.attachEvent)” 请注意，此代码仅在末尾添加 TAB。在大多数情况下不方便。 @SteveFenton 有没有一种简单的方法可以用keycode 8 再次删除空格？
只有 keydown 捕获标签，keyup 捕获标签，但在标签到不确定元素之后【参考方案2】：
我宁愿制表符缩进不起作用，也不愿打破表单项之间的制表符。
如果要缩进以将代码放入 Markdown 框中，请使用 Ctrl+K（或 Mac 上的 ⌘K）。
就实际停止动作而言，当您从事件回调中返回 false 时，jQuery（Stack Overflow 使用）将阻止事件冒泡。这让使用多个浏览器的工作变得更轻松。
【讨论】：
【参考方案3】：前面的答案很好，但我是那些坚决反对将行为与表示混合（将 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】：我建议不要更改键的默认行为。我尽可能不触碰鼠标，所以如果你让我的 tab 键不移动到表单上的下一个字段，我会很生气。
但是，快捷键可能很有用，尤其是对于大型代码块和嵌套。 Shift-TAB 是一个不好的选择，因为它通常会将我带到表单上的前一个字段。也许 WMD 编辑器上的一个新按钮可以插入一个带有快捷键的代码 TAB？
【讨论】：
这个问题完全取决于应用程序。我正在开发代码编辑器控件。我没有提供 Tab 键，我的学生都抱怨。我没有这样做是因为我不想破坏我的一个盲人学生的可访问性。我现在添加了选项卡支持，但还提供了一个用户偏好选项来关闭它。 @Charles 关于可访问性影响的观点非常好。 @Charles，您能否详细说明一下如何添加 Tab 键支持这可能会破坏盲人用户的可访问性？是不是因为一些盲人用户依靠标签来转移焦点，就像这个答案描述的那样？【参考方案5】：在 Mac 上的 Chrome 中，alt-tab 将制表符插入到 <textarea> 字段中。
这是一个：。哇！
【讨论】：
【参考方案6】：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 更新代码
【讨论】：
以上是关于在文本框中捕获 TAB 键 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章