前端全屏光标闪烁异常排查清单

// 检测当前获取焦点的元素
const activeEl = document.activeElement;
console.log('当前聚焦元素:', activeEl);

// 定义需要显示光标的合法元素类型
const validInputTags = ['INPUT', 'TEXTAREA', 'SELECT'];
const isContentEditable = activeEl.isContentEditable;
const isValid = validInputTags.includes(activeEl.tagName) || isContentEditable;

// 若为异常聚焦元素，自动取消焦点
if (!isValid) {
  console.warn('检测到异常聚焦的非输入元素，已取消焦点');
  activeEl.blur();
} else {
  console.log('当前聚焦元素为合法输入类元素，无需处理');
}

// 可选：监听全局聚焦事件，实时监控异常聚焦
document.addEventListener('focus', function(e) {
  const target = e.target;
  const targetIsValid = validInputTags.includes(target.tagName) || target.isContentEditable;
  if (!targetIsValid) {
    console.warn('捕获到异常聚焦元素:', target);
  }
}, true);

/**
 * 页面异常聚焦检测与修复脚本
 * 自动检测非输入类元素的异常聚焦，可开启实时监听
 */
(function() {
  // 配置项：是否开启实时聚焦监听
  const CONFIG = {
    enableRealTimeMonitor: true
  };

  // 合法的可聚焦输入类元素标签
  const VALID_INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];

  /**
   * 检测单个元素是否为合法聚焦元素
   * @param {HTMLElement} el 待检测元素
   * @returns {boolean} 是否合法
   */
  function isLegalFocusElement(el) {
    return VALID_INPUT_TAGS.includes(el.tagName) || el.isContentEditable;
  }

  /**
   * 检测并修复当前聚焦的异常元素
   */
  function checkAndFixActiveElement() {
    const activeEl = document.activeElement;
    if (!isLegalFocusElement(activeEl)) {
      console.warn('[聚焦检测] 发现异常聚焦元素:', activeEl);
      activeEl.blur();
    }
  }

  // 页面加载完成后执行一次检测
  if (document.readyState === 'complete') {
    checkAndFixActiveElement();
  } else {
    window.addEventListener('load', checkAndFixActiveElement);
  }

  // 开启实时监听（可选）
  if (CONFIG.enableRealTimeMonitor) {
    document.addEventListener('focus', function(e) {
      if (!isLegalFocusElement(e.target)) {
        console.warn('[实时监听] 捕获异常聚焦元素:', e.target);
      }
    }, true);
  }
})();

vue项目：

<template>
  <!-- 无 UI 渲染，仅作逻辑执行 -->
</template>

<script>
export default {
  name: 'FocusDetector',
  mounted() {
    // 页面挂载后立即执行一次检测
    this.checkAndFixActiveElement();
    // 开启实时监听
    this.enableRealTimeMonitor();
  },
  beforeUnmount() {
    // 组件卸载时移除监听，防止内存泄漏
    document.removeEventListener('focus', this.handleFocus, true);
  },
  methods: {
    isLegalFocusElement(el) {
      const validTags = ['INPUT', 'TEXTAREA', 'SELECT'];
      return validTags.includes(el.tagName) || el.isContentEditable;
    },
    checkAndFixActiveElement() {
      const activeEl = document.activeElement;
      if (!this.isLegalFocusElement(activeEl)) {
        console.warn('[Vue 聚焦检测] 发现异常元素:', activeEl);
        activeEl.blur();
      }
    },
    enableRealTimeMonitor() {
      this.handleFocus = (e) => {
        if (!this.isLegalFocusElement(e.target)) {
          console.warn('[Vue 实时监听] 捕获异常聚焦:', e.target);
        }
      };
      document.addEventListener('focus', this.handleFocus, true);
    }
  }
};
</script>

<template>
  <div id="app">
    <FocusDetector />
    <!-- 其他业务组件 -->
  </div>
</template>
<script>
import FocusDetector from './components/FocusDetector.vue';
export default { components: { FocusDetector } };
</script>