<form class="form">
<input type="text" class="input" value="Нажми на меня" placeholder="Focus this input" />
<div class="shortcut-helper-menu hidden">
<h1 class="header">Клавииатурные сокращения</h1>
<div class="shortcut">
<div class="label">Воспроизвести/Пауза</div>
<div class="key-command">
<span class="key key-16">Шифт</span> + <span class="key key-32">Пробел</span>
</div>
</div>
<div class="shortcut">
<div class="label">Промотать вперёд</div>
<div class="key-command">
<span class="key key-16">Шифт</span> + <span class="key key-39">Стрелка вправо</span>
</div>
</div>
<div class="shortcut">
<div class="label">Промотать назад</div>
<div class="key-command">
<span class="key key-16">Шифт</span> + <span class="key key-37">Стрелка влево</span>
</div>
</div>
</div>
</form>
<script>
var input = document.querySelector('.input');
var helperMenu = document.querySelector('.shortcut-helper-menu');
function addHighlight(keyCode) {
$('.key-' + keyCode).addClass('pressed');
};
function removeHighlight(keyCode) {
$('.key-' + keyCode).removeClass('pressed');
};
window.addEventListener('keydown', function(event) {
if (event.shiftKey) {
event.preventDefault();
};
addHighlight(event.keyCode);
});
window.addEventListener('keyup', function(event) {
removeHighlight(event.keyCode);
});
input.addEventListener('focus', function() {
$(helperMenu).toggleClass('hidden', 'shown');
});
input.addEventListener('blur', function() {
$(helperMenu).toggleClass('hidden', 'shown');
});
</script>
