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

// 检测当前获取焦点的元素
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>