如何用 JavaScript 实现 Tab 键聚焦时动态显示链接内的缩写文本

在网页开发里，我们经常把较长的链接文字缩写成简短形式以节省空间。但当使用者通过键盘 Tab 键移动焦点时，仅靠缩写很难知道链接真实含义。借助 JavaScript 监听焦点事件，就能在链接被聚焦时临时显示完整文本，移开焦点再恢复缩写。

实现思路

我们给每个需要处理的链接加上 data-full 属性存放完整文本，原本的缩写放在标签之间。当元素触发 focus 事件，把文本内容替换为完整值；触发 blur 事件时还原缩写。

HTML 结构示例

<a href="https://ipipp.com/docs" data-full="查看完整开发文档">文档</a>
<a href="https://ipipp.com/about" data-full="关于我们团队介绍">关于</a>

JavaScript 逻辑

使用事件委托或直接绑定，监听 focus 与 blur。下面以原生 JS 为例：

// 获取所有带 data-full 的链接
const links = document.querySelectorAll('a[data-full]');

links.forEach(function(link) {
  // 保存原始缩写
  link.dataset.short = link.textContent;
  
  link.addEventListener('focus', function() {
    // 聚焦时显示完整文本
    link.textContent = link.dataset.full;
  });
  
  link.addEventListener('blur', function() {
    // 失去焦点恢复缩写
    link.textContent = link.dataset.short;
  });
});

兼容与体验细节

如果链接本身已有 title 属性，鼠标悬停也会提示全文，但键盘用户不会触发悬停。上述方法对键盘用户更友好。若担心频繁改文本导致屏幕阅读器重复播报，可额外用 aria-label 固定读屏内容。

使用 aria-label 优化

links.forEach(function(link) {
  link.setAttribute('aria-label', link.dataset.full);
  link.dataset.short = link.textContent;
  
  link.addEventListener('focus', function() {
    link.textContent = link.dataset.full;
  });
  link.addEventListener('blur', function() {
    link.textContent = link.dataset.short;
  });
});

小结

通过 JavaScript 绑定 focus 与 blur，在 Tab 键聚焦链接时动态显示缩写内的完整文本，是低成本且实用的无障碍改进。核心就是利用 data 属性暂存内容并切换文本节点，不影响原有页面结构与样式。

JavaScriptTab键聚焦缩写文本修改时间：2026-07-27 01:48:10