Наверх

Длинный placeholder в виде анимированной бегущей строки в поле input средствами CSS

Placeholder (плейсхолдер) - атрибут поля ввода в HTML, позволяющий дать пользователю пояснение или подсказку о том, что в это поле следует вводить. Иногда такая подсказка может оказаться достаточно длинной, но штатные средства HTML не позволяют пользователю взаимодействовать с плейсхолдером, например прокручивать или разворачивать. В таком случае пользователь просто не увидит часть подсказки, скрытой за пределами поля ввода.

Решим эту задачу, сэмулировав для такого плейсхолдера поведение бегущей строки.

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; /* no line break */
  color: grey;
  pointer-events:none; /* avoid any interaction */
  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)

Попробовать самостоятельно

Добавить комментарий

Ваш адрес email не будет опубликован.