Telegram-like анимированный placeholder для HTML-инпутов

    В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.

    Как-то раз я заметил интересную анимацию placeholder'a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.

    Сразу понял, что у HTML нет своего API для этого и надо было использовать JavaScript-хаки. Но слишком много хаков мне хотелось использовать, т.к. код должен быть легко портируем и, желательно, вообще не затрагивать готовую разметку на проектах, которые уже в продакшене.

    С использованием CSS attr property и CSS content получился примерно вот такой концепт:

    SCSS
    label.placeholder {
        position: relative;
    
        &:after {
            display: flex;
            align-items: center;
    
            content: attr(data-placeholder);
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: $after-left;
    
            font-size: 14px;
            color: grey;
            cursor: text;
            transition: transform $tf-duration $tf, opacity $tf-duration $tf;
            transform: translateX(0);
            opacity: 1;
    		color: $input-default-color;
        }
    
        &.hidden {
            &:after {
                transform: translateX(40%);
                opacity: 0;
            }
        }
    }
    


    И немного jQuery:

    jQuery
    $(document).ready(function() {
        function placeholderAnimation() {
        	var $placeholder = $('input[placeholder]');
    
            $placeholder.each(function () {
        	    $(this).wrap('<label class="placeholder" data-placeholder="' + this.placeholder + '">').attr('placeholder', '');
        	}).on('keyup', function () {
        	    $(this).parent().toggleClass('hidden', this.value !== '');
        	});
        }
    
        placeholderAnimation();
    });
    



    Из плюсов:
    • Легко портируется на готовые проекты
    • CSS подбирает значения плейсхолдеров из HTML => не надо менять разметку
    • Всё контролируется CSS-анимациями, соотв. можно налепить всякие cubic-bezier'ы и играться.
    • Впишется в любые дизайны, в отличие от всяких там материальных инпутов, где всё прыгает и требует подходящего дизайна всего приложения.
    • Быстрый и простой способ сделать UX инпутов немного лучше и приятнее


    Из минусов:
    • Из-за flexbox'a поддержка IE11+
    • Из-за лага в keyup событии, пришлось курсор и первую букву плейсхолдера разделить одной буквой, чтобы при вводе в инпут, плейсхолдер и значения ипута не накладывались друг на друга.


    Демка на CodePen
    GitHub

    P.S. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.
    Поделиться публикацией

    Комментарии 9

      0
      Симпатично. Но атрибут data-placeholder лучше устанавливать через метод .data, а не в HTML-коде. Что, если this.placeholder содержит всякие нехорошие символы?
        +1
        Свежий Сафари на Маке – никакой анимации не вижу, к сожалению.
          0
          Хм. Это 9 сафари и El Captain? Чекнул в browserstack, всё ок. Там по-моему нечему ломаться, кроме флексбокса, и, может быть attr в css.
            +2
            8.0.8 на Yosemite. Мне смысла Вас обманывать нет никакого, анимации действительно нет :)
              0
              Всё куда проще — caniuse.com/#feat=transforms2d, в 8 сафари трансформ с префиксом работает ещё.

              PS. Так же нет анимации на Safari 8.0.8.
            –3
            как я вам завидую, когда есть время заниматься «всякой фигней»)
              +3
              Не хватает гифки вначале чтобы понимать чего же хочется достичь, для тех кто никогда не видел Telegram.
                0
                Мне больше нравится такой подход: codepen.io/anon/pen/xwKORw
                Когда подпись при вводе не исчезает, а смещается наверх. То есть остаётся понятным что это за поле, даже когда оно заполнено.
                  0
                  в я.браузере тоже не работает

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое