Placeholder (плейсхолдер) — атрибут поля введення в HTML, який дозволяє надати користувачеві пояснення або підказку про те, що потрібно вводити в це поле. Іноді така підказка може бути досить довгою, але штатні засоби HTML не дозволяють користувачеві взаємодіяти з плейсхолдером, наприклад, прокручувати чи розгортати його. Коли placeholder довгий, користувач просто не побачить частину підказки, яка прихована за межами поля введення.
Розв’яжемо цю задачу, земулювавши для такого плейсхолдера поведінку рядка, що біжить.
1. HTML
Для виконання задуму нам знадобиться окремий блок, який міститиме наш довгий плейсхолдер. При цьому плейсхолдер поля введення має залишатися порожнім.
<div class="container">
<input class="showPlaceholder" type="text" placeholder=" "> /* цей placeholder має залишатися порожнім */
<div class="placeholderText" placeholder="some really really really long text here"></div>
</div>2. CSS
Задайте стилі поля введення на власний розсуд. Переконайтеся, що ширина поля збігається з параметром у властивостях анімації scrollText (у цьому прикладі 100px).
Керувати швидкістю та поведінкою прокручування можна за допомогою параметра animation селектора .showPlaceholder+.placeholderText:before.
.container {
display:inline-block;
margin: 10px;
position:relative;
z-index:0;
overflow:hidden;
}
input {
width: 100px;
border-radius:4px;
border: 2px solid green;
padding: 5px;
vertical-align:top;
background:transparent; /* прозорий фон потрібен, щоб було видно псевдоелемент */
}
.showPlaceholder+.placeholderText:before {
content:attr(placeholder);
position:absolute;
left:5px;
top:5px;
white-space:nowrap; /* без переносу рядка */
color: grey;
pointer-events:none; /* уникнення будь-якої взаємодії */
animation: 4s scrollText infinite;
z-index:-1;
}
.showPlaceholder:focus + .placeholderText:before{
content:'';
animation:none;
}
@keyframes scrollText {
to {
transform: translateX(calc(100px - 100%));
}
}3. Javascript
У принципі, можна обійтися і без Javascript. Цей код дозволяє вимкнути видимість placeholder у тому випадку, якщо користувач щось ввів у поле.
inputs = document.getElementsByTagName('input');
let input = inputs[0];
input?.addEventListener('change', (ev)=>{
if(ev.target.value){
ev.target.classList.remove("showPlaceholder")
}else{
ev.target.classList.add("showPlaceholder")
}
}, false)