在 HTML 中，您可以在表单中设置自己的快捷键：
<label accesskey="n">name</label>
但是，如何显示“n”以使用户注意到该字母是快捷方式的首选形式呢？旧的惯例是显示它下划线的，在 HTML 中应该是这样的：
<label accesskey="n"><u>n</u>ame</label>
... 但是由于<u>HTML5 中不鼓励使用标签，是否有标准（或常规）形式在 HTML 页面中显示这种快捷字符？
P.S.：我知道我可以通过类似的方式设置特定的风格<span class="mystyle">n</span>，但我要求一个更简单的解决方案 - 最好是一些特定的HTML tag.
一种选择是使用 CSS 来附加使用 CSS 的 accesskey。
[accesskey]::after {
content: " [" attr(accesskey) "]";
}
<label accesskey="n">name</label>
我能看到的唯一其他选项（如果您不想手动突出显示 accesskey 本身）是使用 JavaScript 来包装密钥。
// This uses ES6 syntax
// [].find() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
// NodeList.forEach() - https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
// ChildNode.replaceWith() - https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith
function parseHTML(htmlString) {
return document.createRange().createContextualFragment(htmlString);
}
function findFirstTextNode(element) {
return Array.prototype.find.call(element.childNodes, (node) => (
node.nodeType === Node.TEXT_NODE
));
}
// Extremely basic implementation
function sprintf(string, ...args) {
return args.reduce(
(rendered, item) => rendered.replace("%s", item),
string
);
}
function highlightAccessKey(
el,
replaceString = "<span class=\"accesskey\">%s</span>",
appendString = "<span class=\"accesskey\">[%s]</span>"
) {
let accesskey = el.getAttribute("accesskey");
let textNode = findFirstTextNode(el);
if (textNode) {
let text = textNode.textContent;
let index = text.indexOf(accesskey);
if (index > -1) {
text = (
text.slice(0, index)
+ sprintf(replaceString, accesskey)
+ text.slice(index + accesskey.length)
);
} else {
text += sprintf(appendString, accesskey);
}
textNode.replaceWith(parseHTML(text));
} else {
el.appendChild(parseHTML(sprintf(appendString, accesskey)));
}
}
document
.querySelectorAll("[accesskey]")
.forEach((el) => highlightAccessKey(el));
.accesskey {
text-decoration: underline;
}
<label accesskey="n">name</label>
遗憾的是，没有现成的解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
