null

Работаем с placeholder'ом и проверкой input'а на пустую строку

17 февраля 2017 0 Alexander Yarkeev

В сегодняшней заметке рассмотрим решение нескольких нетиповых задач по стилизации 'поиска', которые встретились мне на днях.

У нас имеется класический search bar, к которому нужно приделать следующие вещи: сделать разные цвета у placeholder'а и вводимого текста, а также если поле не пустое (пользователь ввёл хоть один символ) показывать крестик, нажатие на который очищает поле.

На первой картинке изображено состояние search bar'а в неактивном состоянии,как можно увидеть placeholder имеет зеленый цвет. И крестик слева не отображается.

 

На второй картинке состояние, когда пользователь ввёл текст, цвет изменился на белый, а справа появился крестик для очистки поля.

 

Первый пункт реализуется благодаря, мало известному псевдоклассу :placeholder-shown, который позволяет применить стили к input'у тогда, когда ничего не введено и показывается placeholder,

 

Из этого получаем такой селектор

#search-input:placeholder-shown {
   color: green;
}

 

Также, стоит заметить, что поддержка данного свойства далека от идеала, но, на сегодняшний день поддерживается почти все современными браузерами (кроме edge, на ресурсах которого уже с февраля 2016 года, висит feature-request на реализацию этого псевдо-класса). Будем надеяться, что в ближайшее время Microsoft тоже подтянется и реализует его у себя. Если учесть во внимание, что в большинстве случаев этот псевдокласс нужен для косметических изменений, то можно смело применить его уже сейчас, отказавшись от поддержи данной фичи в IE и Edge.

 

 

Задача с показывание элемента, когда текстовое поле имеет не пустое значение может быть решена по-разному, я покажу варианты, используя css, при этом жертвуя поддержкой, и используя javascript.

 

Можно заметить, что input содержит текст, эквивалентно тому, что в нём не показывается placeholder. Для этого можно воспользоваться псевдоклассом :not. Cелектор для этой задачи примет такой вид

#search-input:not(:placeholder-shown) {
   /* rules */
}

Однако, это позволит задать стили для самого 'поля ввода', в нашем случае же необходимо выбрать следующий после него элемент. Теперь приклеем к нашему селектору с помощью родственного селектора '+' нашу иконку и зададим ей свойство display в значение block.

#search-input:not(:placeholder-shown) + .fa.fa-times {
  display: block;
}

 

Второй вариант - использование функции обработчика события onChange, навешенной на input.

Код её будет выглядеть примерно так:

search(e) {
        e.preventDefault();
        let q = e.target.value;
        if (q === "") {
            $(".fa-times").css("display", "none");
        } else {
            $(".fa-times").css("display", "block");
       }
}

 

Вот и всё. На этом я, пожалуй, откланяюсь.