如何可靠实现输入框聚焦时全选文本？解决绑定onFocus后选中交替失效问题

这个交替生效/失效的行为，本质是浏览器原生事件执行时序和全局Selection状态残留共同触发的逻辑误判，和编写的全选代码本身无关：

1. 拆解两次点击的完整执行链路，对应观察到的“一好一坏循环”现象：
   • 第一次点击（无残留Selection状态时触发input聚焦）：
     事件执行顺序为 mousedown → focus回调执行select()完成全选 → mouseup阶段触发原生光标调整逻辑，此时全局Selection没有存储之前的选中记录，原生逻辑不会触发覆盖操作，全选效果正常生效。
   • 第二次点击（input失焦后重新触发聚焦）：
     核心问题出在失焦环节：浏览器移除input焦点时，只会隐藏渲染层的选中高亮，不会清空内存中全局Selection对象存储的选中范围——这刚好匹配调试时发现的“失焦后手动调用document.getSelection().toString()依然能拿到之前全选的文本，但是页面看不到选中高亮”的现象。
     此时重新点击input触发focus，回调先执行select()重新全选文本，紧接着到mouseup阶段，浏览器原生逻辑检测到全局Selection里存了“input全选文本”的旧记录，就会误判这是“用户在已选中区域做第二次点击，需要取消选中、将光标定位到实际点击位置”，这个原生行为会直接覆盖掉刚执行的全选结果，导致选中失效。
2. 循环交替的触发逻辑：
   上述原生覆盖逻辑执行完之后，全局Selection的状态就会变为“光标定位在点击位置、无选中内容”，下次再失焦再点击的时候，因为没有了全选状态的残留记录，原生逻辑又不会触发覆盖操作，全选就会再次生效，往复循环就形成了一次成功、一次失败的交替现象。
   之前尝试用preventDefault、合成事件onMouseUp返回false没有效果，是因为React的合成事件是挂在根节点的委托逻辑上的，事件触发时机早于原生元素上的默认行为执行节点，根本挡不住这个内置逻辑的触发。

• 时序错位法：把select()逻辑延后到原生鼠标默认行为执行完成之后再触发，从执行顺序上避免被覆盖：

  <input 
    type="text" 
    value="-:--" 
    onFocus={(e) => {
      // 将select逻辑放到当前事件循环的最后执行，等原生mouseup的光标调整逻辑跑完
      setTimeout(() => e.target.select(), 0)
    }} 
  />
  

• 状态清零法：从根源上消除失焦时的Selection残留，不让浏览器拿到旧的选中记录做误判：

  <input
    type="text"
    value="-:--"
    onFocus={(e) => e.target.select()}
    onBlur={() => window.getSelection()?.removeAllRanges()}
  />
  

• 原生拦截法：直接在input元素上绑定原生mouseup事件，阻止原生的光标调整默认行为，从逻辑上切断覆盖操作：

  <input
    ref={(node) => {
      if (!node) return
      node.addEventListener('mouseup', (e) => {
        e.preventDefault()
      })
    }}
    type="text"
    value="-:--"
    onFocus={(e) => e.target.select()}
  />
  

注意：不要在mousedown阶段拦截事件，否则会直接阻断input的聚焦流程，导致输入框无法正常激活输入。

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