Edge浏览器input元素title属性显示异常问题求助

DevOps 小满

2026-6-15

解决Edge浏览器中Input聚焦时显示Title提示的问题

问题说明

设置了带title属性的Input输入框，预期仅在鼠标悬停时显示提示，但Edge浏览器中用Tab键切换聚焦时会自动显示title内容，Chrome、Firefox等其他浏览器表现正常。

解决方案

通过JavaScript动态控制title属性的添加与移除，仅在鼠标悬停时激活title，聚焦时禁用。

步骤1：修改HTML结构

将原title属性替换为自定义属性data-title，用于存储原始提示文本：

<input id="text1" type="text" name="text1" autofocus="" data-title="42"/>
<br>
<input id="text2" type="text" name="text2" data-title="BMW"/>
<br>
<input id="text3" type="text" name="text3" data-title="AUDI"/>
<br>

步骤2：添加JavaScript控制逻辑

添加以下脚本，监听鼠标和焦点事件，动态管理title属性：

// 选中所有带data-title属性的输入框
const inputElements = document.querySelectorAll('input[data-title]');

inputElements.forEach(input => {
  // 保存原始提示文本
  const originalTip = input.dataset.title;

  // 鼠标悬停时，设置title显示提示
  input.addEventListener('mouseover', () => {
    input.title = originalTip;
  });

  // 鼠标离开时，若输入框未聚焦则清空title
  input.addEventListener('mouseout', () => {
    if (!input.matches(':focus')) {
      input.title = '';
    }
  });

  // 输入框获得焦点时，清空title避免显示提示
  input.addEventListener('focus', () => {
    input.title = '';
  });

  // 输入框失去焦点时，若鼠标不在输入框上则清空title，否则恢复提示
  input.addEventListener('blur', () => {
    input.title = input.matches(':hover') ? originalTip : '';
  });
});