移动端浏览器输入框获焦后自动失焦问题求助

嘿，这个移动端的焦点异常问题我之前处理过好几次，大概率是触摸事件与焦点事件的时序冲突或者元素渲染时机未匹配导致的，给你几个针对性的解决方案：

方案1：延迟调用focus，确保元素完成渲染 #

有时候调用show()后，输入框还没完全完成DOM渲染就执行focus()，移动端浏览器的焦点机制会出现异常。给焦点调用加个小延迟就能解决：

// 显示搜索框
$('#searchbar-form').show();
// 延迟100ms再触发焦点，确保元素已渲染完成
setTimeout(() => {
  $('#search-input').focus();
}, 100);

这个延迟时间不用太长，50-100ms足够适配大部分移动端浏览器的渲染节奏，你可以根据实际情况微调。

方案2：拦截按钮的触摸/点击事件，避免时序干扰 #

移动端的click事件是基于触摸事件模拟的，存在300ms延迟，而且按钮的触摸事件可能会和输入框的焦点事件产生时序冲突。可以改用touchstart事件配合拦截默认行为：

$('#search-button').on('touchstart click', function(e) {
  // 阻止触摸事件的默认行为，避免系统级的事件干扰
  e.preventDefault();
  // 阻止事件冒泡，避免触发页面上的全局点击监听
  e.stopPropagation();
  
  $('#searchbar-form').show();
  $('#search-input').focus();
});

这里同时监听touchstart和click是为了兼容桌面端（桌面端没有触摸事件），确保两端行为一致。

方案3：检查全局点击关闭逻辑的过滤规则 #

如果你有“点击输入框外部关闭搜索框”的逻辑，很可能是按钮的点击事件冒泡到document，触发了关闭逻辑导致输入框失焦。需要在全局监听中排除按钮和搜索框本身：

$(document).on('click', function(e) {
  // 判断点击目标是否在搜索框或按钮范围内，不在才关闭
  if (!$(e.target).closest('#searchbar-form, #search-button').length) {
    $('#searchbar-form').hide();
  }
});

这样点击按钮或搜索框内部时，不会触发关闭逻辑，自然也就不会导致输入框意外失焦。

另外要提醒你：在blur事件中调用preventDefault()是没用的，因为blur事件是焦点已经丢失后才触发的，这个方法无法逆转焦点丢失的结果，反而会破坏正常的失焦行为（比如点击外部无法关闭输入框）。

先试试方案1，这是最常见的解决办法，如果不行再排查事件冒泡和全局监听的问题，应该能解决你的移动端异常~

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