使用e.preventDefault()无法阻止Tab默认行为，事件未触发问题咨询

DevOps 小满

2026-5-22

解决Tab键在textarea中触发焦点切换的问题

我来帮你分析下问题所在，以及怎么修复：

为什么你的代码无效？

你绑定的是keyup事件，但Tab键的默认行为（切换到下一个输入框）是在keydown阶段就已经执行了。等keyup事件触发的时候，你的textarea已经失去焦点了，所以acceptTabsSpace函数根本不会被调用——这就是为什么你觉得函数没执行的原因。就算函数能执行，keyup阶段再调用preventDefault()也晚了，因为默认的焦点切换已经完成了。

正确的解决方案

改用keydown事件来拦截Tab键，这个事件会在浏览器执行默认行为之前触发，能有效阻止焦点切换。如果需要的话，还可以让Tab键在textarea里插入制表符，而不是切换焦点：

$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
  const keyCode = e.keyCode || e.which;
  if (keyCode === 9) {
    e.preventDefault(); // 直接阻止默认的焦点切换行为
    
    // 可选：如果想在textarea中插入Tab字符，取消下面的注释
    /*
    const textarea = this;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    textarea.value = value.substring(0, start) + "\t" + value.substring(end);
    // 光标定位到Tab字符后面
    textarea.selectionStart = textarea.selectionEnd = start + 1;
    */
    
    return false;
  }
}