Всплывающая подсказка к текстовому полю на CSS3 и jQuery

Разместил: Apocalypse
2 июня 2016

Очень интересная реализация подсказки, которая появляется, когда текстовое поле получает фокусировку. В этой подсказке клавиатурные сокращения, которые загораются, когда нажаты соответствующие кнопки (Например, Шиф или Шифт + Пробел) Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.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;
}

.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;

}

2#: Форма с текстовым полем оформляется вот так:

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

<h1 class="header">Клавииатурные сокращения</h1>

<div class="label">Воспроизвести/Пауза</div>

<span class="key key-16">Шифт</span> + <span class="key key-32">Пробел</span>

</div>

<div class="label">Промотать вперёд</div>

<span class="key key-16">Шифт</span> + <span class="key key-39">Стрелка вправо</span>

</div>

<div class="label">Промотать назад</div>

<span class="key key-16">Шифт</span> + <span class="key key-37">Стрелка влево</span>

</div>

</form>

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>

Автор публикации

не в сети 1 месяц

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: CSS3 Input jQuery Shortcuts Text Tooltip Всплывающая Подсказка Текстовое поле

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

Всевидящее око

Новый комментарий от пользователя EugeneRig: «Сервис рассылок по любым каналам:

В нашем арсенале имеются базы:
- Москва и Санкт-Петербург
- Любые регионы РФ
- Компании всех сфер бизнеса
- Любые страны мира
- Сформируем базу по Вашим параметрам

Стоимость рассылки 1 000 000 сообщений на e-mail адреса составит всего 3 900 рублей.

А также рассылки по WhatsApp, Телеграм, ВКонтакте.

Обращайтесь по любым вопросам: 7(9 25) 3 45= 20= 0 3 (WhatsApp)» в материале contacts

2025-01-12 01:12:23

Всевидящее око

Новый комментарий от пользователя Charlesdeach: «Hello,

Are you ready to step into the future of web development? Neuron Expert, an advanced AI platform, is looking for skilled webmasters to collaborate on creating and managing AI-powered virtual companies. These innovative businesses leverage sophisticated AI technology to revolutionize online operations, and we need your expertise to make it happen!

Why Join Neuron Expert?

Innovative Projects:
Work on AI-driven companies that redefine the way businesses operate online.

Flexible Opportunities:
Choose your schedule and projects.

Competitive Earnings:
Get paid for your expertise while contributing to groundbreaking initiatives.

Expand Your Skills:
Gain experience in integrating AI with web development.

What We Need:
• Proficiency in web development and website management.
• Experience with various CMS platforms, plugins, themes, and customizations.
• Passion for innovation and AI-driven solutions.

Ready to Join?

Take the next step and become a part of the Neuron Expert community. Together, we’ll shape the future of virtual companies!

Click here (https://neuron.expert/network/#webmasters) to join or learn more!

Best regards,
The Neuron Expert Team» в материале contacts

2025-01-15 14:57:36

Всевидящее око

Новый комментарий от пользователя VincentPraky: «Здравствуйте!

К Вам есть предложение - предоставить Вам базу потенциальных клиентов и выполнить отправку сообщений в WhatsApp, с Вашим предложением.

Сообщения будут приходить тем людям, которые являются Вашими наиболее целевыми клиентами.

А также есть возможность выполнять рассылки на адреса электронной почты.

Напишите мне пожалуйста в WhatsApp: 7(92 5) 34 5=20- 03

Заранее благодарен, Вячеслав.» в материале contacts

2025-01-15 18:19:50

Всевидящее око

Новый комментарий от пользователя DavidFoemn: «Здравствуйте!

Хочу предложить спарить базу потенциальных заказчиков для Вашего бизнеса в формате excel.

База парится из интернета, может быть отфильтрована по отраслям и региону.

В данной базе будут содержаться:
- Емейл адреса
- Телефонные номера, в том числе мобильные
- Название фирм
- Адрес сайтов и т.п.

База предназначается для работы для Ваших менеджеров по продажам - для отправки коммерческих предложений т.п.

Также возможно произвести рассылку по по данной базе.

Обращайтесь: 7 (9 25) 4 7 3 ==00-- 9 6 (WhatsApp)

С уважением, Дмитрий.» в материале contacts

2025-01-16 15:40:27

Всевидящее око

Новый комментарий от пользователя MichaelLam: «Здравствуйте!

Есть заинтересованные клиенты - могу поставлять для Вас контакты по цене 500-1600 рублей за каждый лид.

Если не против - давайте перейдем в WhatsApp или позвоните мне пожалуйста: 7 (9 2 9) 5 0 4 == 73 0 4

Обговорим подробности.

А также есть возможность запуска рассылок по Email, WhatsApp, telegram и VK.

С уважением, Егор.» в материале contacts

2025-01-18 02:27:01

......

Для публикации сообщений в чате необходимо авторизоваться