{"id":264352,"date":"2015-08-26T20:08:02","date_gmt":"2015-08-26T16:08:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=264352"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=264352","title":{"rendered":"Telegram-like \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 placeholder \u0434\u043b\u044f HTML-\u0438\u043d\u043f\u0443\u0442\u043e\u0432"},"content":{"rendered":"

\t\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f UX\/UI \u044f \u0447\u0430\u0441\u0442\u043e \u0441\u0438\u0436\u0443 \u0438 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u044b\u043b\u043e \u0447\u0443\u0442\u043e\u0447\u043a\u0443 \u0432\u0435\u0441\u0435\u043b\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c.<\/p>\n

\u041a\u0430\u043a-\u0442\u043e \u0440\u0430\u0437 \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e placeholder’a \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c Desktop \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 Telegram. \u041f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0438 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n

<\/a><\/p>\n

\u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0443 HTML \u043d\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e API \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438 \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript-\u0445\u0430\u043a\u0438. \u041d\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0445\u0430\u043a\u043e\u0432 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442.\u043a. \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438, \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.<\/p>\n

\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS attr property<\/a> \u0438 CSS content \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442:<\/p>\n

SCSS<\/b><\/p>\n
\n
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; \t\tcolor: $input-default-color;     }      &.hidden {         &:after {             transform: translateX(40%);             opacity: 0;         }     } } <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  \u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e jQuery:<\/b><\/p>\n
jQuery<\/b><\/p>\n
\n
$(document).ready(function() {     function placeholderAnimation() {     \tvar $placeholder = $('input[placeholder]');          $placeholder.each(function () {     \t    $(this).wrap('<label class="placeholder" data-placeholder="' + this.placeholder + '">').attr('placeholder', '');     \t}).on('keyup', function () {     \t    $(this).parent().toggleClass('hidden', this.value !== '');     \t});     }      placeholderAnimation(); }); <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  \u0418\u0437 \u043f\u043b\u044e\u0441\u043e\u0432:<\/b>  <\/p>\n