javascript - 使用浏览器的访问键在所有链接的第一个字符下划线

Question

我正在尝试弄清楚如何使用 dom 访问每个访问键链接的访问键，并在按下访问键时在页面上所有链接的第一个字符下划线。

即当人们在 IE 和 Chrome 中按下 alt 时，链接的所有第一个字母都会下划线，让人们知道要按哪个键。无论如何，是否可以通过使用 javascript 为所有浏览器创建一个通用 [访问 key ] 来做到这一点，或者您是否被迫为每个浏览器使用多种方法，从而坚持为每个浏览器编写一个类？

我找到了一种使用 <span> 的方法围绕 Angular 色，但这似乎不是一个好的做法，如果 dom 只是捕获访问 key 并在链接中的字母下划线并用下划线修改它，那就太好了。

非常感谢任何帮助。

Answer 1

var labels= document.getElementsByTagName('label');
for (var i= labels.length; i-->0;) {
    var label= labels[i];
    if (!label.htmlFor) continue;
    var field= document.getElementById(label.htmlFor);
    if (!field) continue;
    if (!field.accessKey) continue;
    var ix= label.firstChild.data.toLowerCase().indexOf(field.accessKey.toLowerCase());
    if (ix===-1) continue;
    var next= label.firstChild.splitText(ix+1);
    var span= document.createElement('span');
    span.className= 'accesshighlight';
    span.appendChild(label.firstChild.splitText(ix));
    label.insertBefore(span, next);
}

这将包装一个 <span class="accesshighlight">围绕标签中的第一个匹配字母，假设标签包含文本内容而不是更多元素(如果您需要在子元素中查找匹配的文本会更耗时)。然后你可以说:

body.showhighlights .accesshighlight {
    text-decoration: underline;
}

并切换 class="showhighlights" 的存在在 document.body当按下 alt 时。