Всплывающая подсказка к текстовому полю на CSS3 и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.form { width: 200px; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .form .input { display: block; line-height: 2rem; text-align: center; width: 100%; } .shortcut-helper-menu { position: absolute; bottom: 100%; left: 0; padding: 1rem; background: #eee; opacity: .9; margin-bottom: 1rem; border-radius: 4px; width: 500px; } .shortcut-helper-menu:after { content: ''; display: block; width: 0; border-style: solid; border-width: 10px 10px 0; border-color: #eee transparent transparent; position: absolute; top: 100%; left: 10px; } .shortcut-helper-menu.hidden { display: none; } .shortcut-helper-menu.shown { display: block; } .header { font-weight: 600; margin-bottom: 1rem; } .shortcut { display: flex; align-items: center; margin-bottom: 1rem; white-space: nowrap; } .label { margin-right: 1rem; width: 200px; } .key { display: inline-block; background: #ddd; line-height: 1.6rem; padding: 0 .5rem; border-radius: 4px; } .key.pressed { background: #00c7b2; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
