技术咨询：触摸屏自助终端文本框焦点保持失效及activeElement用法排查

核心现象 #

开发交互逻辑的预期效果：

• 用户点击非指定下拉框的页面区域时，自动将焦点切回固定输入文本框
• 用户操作带DropDownBoxes类名下拉框组件时，不抢回焦点，允许自由切换焦点
  实际运行效果：就算点击了指定下拉框，焦点还是被强制拉回原文本框。

原有代码的问题定位 #

代码分支中对document.activeElement的使用存在两个关键偏差：

• 读取时机完全错误：blur事件的回调是在焦点离开旧元素的同步流程中触发的，这个阶段浏览器还没完成焦点的归属切换。此时读取document.activeElement，拿到的始终是刚失去焦点的原文本框本身，根本不是用户实际要聚焦的目标元素，判断逻辑永远走不进允许跳过回焦的分支。
• 类名匹配逻辑鲁棒性为0：当前代码用整段类名做字符串正则匹配，但是第三方UI组件渲染时往往会动态调整类名顺序、追加附加类、调整空格格式，就算读取时机正确，也很容易因为类名的细微差异导致匹配失败。

修正后的实现方案 #

针对上述问题调整两点：

• 把activeElement的读取时机移到延时逻辑之后，等浏览器完成完整的焦点切换流程再做判断
• 类名判断改用classList做单标识类匹配，不再硬编码整串类名
  修正后的代码示例：

this.textbox = $('<input class="full-width" type="text" tabindex="1"/>');
this.host.append(this.textbox);
const _this = this;
// 短延时等待浏览器完成焦点切换流程
const sleep = (duration = 100) => new Promise(resolve => setTimeout(resolve, duration));
this.textbox.blur(async function() {
  await sleep();
  const currentActiveElement = document.activeElement;
  // 仅当当前聚焦的元素不是指定下拉框时，执行回焦逻辑
  if (!currentActiveElement.classList.contains('DropDownBoxes')) {
    _this.textbox.focus();
    _this.textbox.select();
  }
});

额外优化注意点 #

• 延时时间控制在100ms即可，过长的等待会导致焦点回跳出现明显延迟、闪烁，影响触屏操作体验
• 如果下拉框的展开面板、选项区域是不可聚焦的元素（比如tabindex="-1"的div），还需要补充判断：当当前activeElement是body时，向上查找点击目标的父级节点，只要存在DropDownBoxes类，就跳过回焦，避免点击下拉选项时被强制拉回文本框

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