CODEWITHSUNDEEP
html
Little Santi
Little Santi

Reputation: 8803

How to display a specific shortcut key in HTML?

In HTML you can set your own shortcut keys in a form:

<label accesskey="n">name</label>

But, how would be the preferred form to display the "n" to make the user notice that this letter is the shortcut? The old convention is to display it underlined, which in HTML should be like this:

<label accesskey="n"><u>n</u>ame</label>

... but since <u> tags are discouraged in HTML5, is there a standard (or conventional) form to display this kind of shortcut characters in a HTML page?

P.S.: I know I can set a specific style through something like <span class="mystyle">n</span>, but I'm asking for an easier solution - preferrably some specific HTML tag.

Upvotes: 4

Views: 2835

Answers (6)

Little Santi
Little Santi

Reputation: 8803

Well, my own answer is to use <abbr> or <mark> (which are the most semantically approximated tags I've found for my purposes), in this mood:

With abbr

abbr {
  text-decoration: underline;
}
<p><label accesskey="n"><abbr>n</abbr>ame<input name="a1"/></label></p>

With mark

label mark {
  background-color: transparent; /* resets the bg color */
  text-decoration: underline;
}
<p><label accesskey="n"><mark>n</mark>ame<input name="a1"/></label></p>

Upvotes: 0

Andrei Fedorov
Andrei Fedorov

Reputation: 3987

Solution with little js

var sc = document.querySelectorAll('[accesskey]');
for (i = 0; i < sc.length; i++) sc[i].innerHTML = sc[i].innerHTML.replace(sc[i].accessKey, '<a>' + sc[i].accessKey + '</a>');
[accesskey]>a {
  text-decoration: underline;
}
<label accesskey="m">name</label>

Upvotes: 2

James Long
James Long

Reputation: 4736

One option is to use CSS to append the accesskey using CSS.

[accesskey]::after {
    content: " [" attr(accesskey) "]";
}
<label accesskey="n">name</label>

The only other option I can see (if you don't want to manually highlight the accesskey itself) is to use JavaScript to wrap the key.

// 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>

Sadly, there's not an out-of-the-box solution.

Upvotes: 5

Andrei Fedorov
Andrei Fedorov

Reputation: 3987

Check it.

label[accesskey]>p::first-letter {
  text-decoration: underline;
}
<label accesskey="n"><p>name</p></label>

Upvotes: 1

Luis Tangui
Luis Tangui

Reputation: 1

I put the letter with an Underline to show the shortcut on buttons or labels. There isn't a convention on HTML5 with the way to set it.

Also you can add the title attribute to show a little description with Shortcut Key.

Something like this:

<button type="button" onclick="alert('Hello world!')" title= "Shortcut: n" accesskey = "n">Click Me!</button>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You could use the title attribute to display the shortcut when the element is hovered:

<label accesskey="n" title="shortcut-key: n">name</label>

Upvotes: 3

Related Questions