JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://raw.github.com/barisaydinoglu/Detectizr/master/detectizr.min.js"></script>
<h1>jQuery + Modernizr: AccessKey detection</h1>
<ul>
<li><a href="javascript:alert('Hello')" accesskey="1">Hello</a></li>
<li><a href="javascript:alert('World')" accesskey="2">World</a></li>
<li><input type="text" accesskey="3" placeholder="Input text" /></li>
</ul>
CSS
*[accesskey]:after {
margin-left: 0.3em;
color: #ccc;
content: "[Alt + " attr(accesskey) "]";
}
body.firefox *[accesskey]:after { content: "[Alt + Shift + " attr(accesskey) "]"; }
body.firefox.mac *[accesskey]:after { content: "[Ctrl + Opt + " attr(accesskey) "]"; }
body.safari.mac *[accesskey]:after { content: "[Ctrl + " attr(accesskey) "]"; }
h1 {
color: #333;
font: bold 23px Arial, sans-serif;
}
ul li a {
color: #666;
font: bold 13px Arial, sans-serif;
text-decoration: none;
}
JavaScript
/**
* Add browser and OS name to body class, and append the shortcut to element title
* @author rogeriolino
*/
(function($) {
$(document).ready(function() {
Modernizr.Detectizr.detect({detectScreen:false});
var body = $('body')
body.addClass(Modernizr.Detectizr.device.browser + ' ' + Modernizr.Detectizr.device.os);
$('*[accesskey]').each(function(i, e) {
var elem = $(e);
prefix = 'Alt';
if (body.hasClass('firefox')) {
if (body.hasClass('mac')) {
prefix = 'Ctrl + Opt';
} else {
prefix = 'Alt + Shift';
}
} else if (body.hasClass('safari mac')) {
prefix = 'Ctrl';
}
elem.prop('title', elem.prop('title') + ' [' + prefix + ' + ' + elem.attr('accesskey') + ']');
});
});
})($);