如何在jQuery中隐藏input元素时避免其获取焦点？

我懂你的烦恼——本来只想让input显示时自动获取焦点，隐藏时完全不碰焦点，但现在触发隐藏动作时，它反倒先抢了焦点，这确实挺闹心的。问题出在fadeToggle的动画时序和你的焦点逻辑没对齐，咱们来调整一下就能搞定：

核心思路 #

fadeToggle是带动画过程的，如果你直接在触发toggle的同时调用focus()，不管是显示还是隐藏操作，代码都会先执行聚焦，再完成动画。所以得利用它的回调函数，等动画完全结束后，再判断当前input是显示还是隐藏状态，只在显示的时候才给焦点。

修正后的代码示例 #

假设你原来的代码大概是这样（简化版）：

// 原来可能有问题的代码
$('.toggle-btn').click(function() {
  $('#myInput').fadeToggle();
  $('#myInput').focus(); // 这里不管显示隐藏都会执行，导致隐藏前聚焦
});

改成下面这样就可以解决问题：

$('.toggle-btn').click(function() {
  const $input = $('#myInput');
  $input.fadeToggle(function() {
    // 动画完成后再判断当前状态
    if ($input.is(':visible')) {
      $input.focus(); // 只有显示的时候才聚焦
    } else {
      // 隐藏时可以主动移除焦点（可选，防止残留焦点状态）
      $input.blur();
    }
  });
});

额外优化小技巧 #

• 如果你的input初始状态是隐藏的，页面加载时可以直接给它加上display: none，避免初始状态下的焦点异常。
• 要是你用的是原生JS而非jQuery，思路完全一致：监听动画结束事件（transitionend），然后通过判断元素的offsetParent是否存在来确认是否显示，再执行focus()或blur()。

这样调整后，input只会在完全显示出来之后才获取焦点，隐藏的时候不会有任何聚焦动作，完美符合你的需求~

内容的提问来源于stack exchange，提问作者fxvlad