使用jQuery为已获取的特定input元素设置focus无效如何解决？

• 时序问题：浏览器的焦点变更属于异步渲染任务，你在调用focus()后立刻同步打印$(':focus')[0]，此时焦点变更还未完成，自然获取不到最新的聚焦元素。
• jQuery UI Draggable冲突：目标元素带有ui-draggable类，jQuery UI的Draggable组件默认会拦截焦点相关事件，阻止输入框正常获得焦点。
• 元素状态异常：如果tabbedCell是未挂载到DOM的游离元素，或者元素被设置了tabindex="-1"、display: none、disabled等属性，会导致聚焦失效。
• 变量指向异常：如果tabbedCell保存的不是单个原生DOM元素，而是选择器字符串、多元素jQuery集合等不符合预期的值，也会导致focus()调用不生效。

1. 先验证基础有效性 #

先确认元素和变量的状态符合预期：

// 验证变量是否为原生DOM元素
console.log(tabbedCell instanceof HTMLElement)
// 验证元素已挂载到当前DOM树
console.log(document.body.contains(tabbedCell))
// 验证元素没有不可聚焦的属性
console.log(tabbedCell.disabled, tabbedCell.hidden, getComputedStyle(tabbedCell).display)

2. 解决Draggable事件拦截 #

如果是Draggable组件导致的冲突，可以在初始化时添加白名单配置，不对表单元素生效拖拽逻辑：

$('.ui-draggable').draggable({
  cancel: 'input,textarea,button,select' // 表单元素不触发拖拽，允许正常聚焦
})

如果组件已经初始化完成，可以临时解绑拖拽的事件拦截后再聚焦：

$(tabbedCell).off('mousedown.ui-draggable').focus()
// 后续需要恢复拖拽功能的话可以重新绑定对应事件

3. 正确获取聚焦元素 #

优先用原生document.activeElement获取当前聚焦元素，比jQuery的:focus选择器兼容性和实时性更好，也可以加微任务延迟验证结果：

console.log(tabbedCell)
$(tabbedCell).focus();
// 直接用原生API获取，避免jQuery选择器的同步问题
console.log(document.activeElement);
// 仍有问题的话加延迟验证
setTimeout(() => {
  console.log(document.activeElement)
}, 0)

4. 手动补充可聚焦属性 #

如果元素缺少可聚焦配置，可以手动添加tabindex属性后再聚焦：

tabbedCell.setAttribute('tabindex', '0')
tabbedCell.focus()

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