React文本输入框移动端触摸无法聚焦问题排查

问题核心原因 #

输入组件在移动端无法唤起光标和键盘，主要关联以下两点：

• 最外层Modal容器设置的tabIndex="-1"会拦截移动端焦点事件
• 手动绑定onClick调用focus()的方式，在移动端触摸事件中易被浏览器默认行为或事件冒泡干扰

具体修复方案 #

方案1：移除Modal容器的tabIndex属性 #

Modal根元素的tabIndex="-1"是焦点拦截的关键，直接删除该属性：

// 修改Modal组件的根div
<div
  className='modal d-block bg-body-tertiary bg-opacity-50 py-md-5'
  role='dialog'
  id='modal'
  onClick={() => navigate(-1)}
>

方案2：替换onClick为onTouchStart（针对移动端优化） #

在Input组件中绑定onTouchStart事件，确保移动端触摸触发聚焦，同时移除冗余的onClick（原生input点击本身会触发聚焦）：

// 修改Input组件的input元素
<input
  ref={inputRef}
  className={`form-control ${className ?? ''}`}
  type={type}
  name={name}
  id={name}
  placeholder={placeholder}
  required={required}
  autoComplete={autoComplete}
  disabled={disabled}
  onChange={(e) => onChange({ payload: e })}
  onTouchStart={handleFocus}
/>

方案3：增强Modal内容区域的焦点管理（可选） #

Modal挂载时主动让内容区域获取焦点，避免焦点停留在后台页面：

// 在Modal组件中添加useRef和useEffect
import { useEffect, useCallback, useRef } from 'react'

const Modal = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const modalContentRef = useRef(null)

  // ... 其他原有代码

  useEffect(() => {
    if (modalContentRef.current) {
      modalContentRef.current.focus()
    }
  }, [])

  // ... 其他原有代码

  const content = (
    <div
      className='modal d-block bg-body-tertiary bg-opacity-50 py-md-5'
      role='dialog'
      id='modal'
      onClick={() => navigate(-1)}
    >
      <div
        className='modal-dialog modal-fullscreen-sm-down modal-dialog-centered'
        role='document'
        onClick={(e) => e.stopPropagation()}
        ref={modalContentRef}
        tabIndex="0" // 添加tabIndex让元素可聚焦
      >
        {/* ... 原有Modal内容 */}
      </div>
    </div>
  )
}

方案4：检查Bootstrap模态框默认行为（若使用原生Bootstrap JS） #

如果依赖原生Bootstrap模态框JS，初始化时设置focus: true确保焦点正确绑定：

const modal = new bootstrap.Modal(document.getElementById('modal'), {
  focus: true
})

验证步骤 #

1. 优先尝试方案1和方案2，这两个是最直接的修复手段
2. 若问题仍存在，再添加方案3强化焦点管理
3. 在移动端测试输入框触摸行为，确认光标和键盘正常唤起

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