Как сделать плавающий placeholder?

Question

[danyfir]

Увидел на сайте тинькофа их обратную форму
https://www.tinkoff.ru/cards/debit-cards/tinkoff-black/

Там placeholder, при клике на input, улетает в левый верхний угол и уменьшается шрифт.


Как это сделать?

Comments

[Ярослав Иванов]

В инструмента разработчика посмотреть?

[Roman Sokolov]

в vuetify тоже такое есть

Answer 1

[Narts]

Это не плейсхолдер, это отдельный спан, который меняет расположение при :focus соседнего инпута

Answer 2

[Dymok]

https://www.jqueryscript.net/form/Animated-Input-P...
https://codepen.io/anon/pen/xRJxEY

Answer 3

[Vladimir T]

Глянь вот это руководство:
https://callmenick.com/dev/floated-labels-with-pla...

З.Ы. Обрати внимание что нету поддержки IE

Answer 4

[Юпитер Макс]

вот вам плагинчик небольшой

(function($) {
	$.fn.FlowupLabels = function( options ){
	
		var defaults = {
				feature_onLoadInit:	true,
				class_focused: 		'focused',
				class_populated: 	'populated'
			},
			settings = $.extend({}, defaults, options);

		return this.each(function(){
			var $scope  = $(this);
    
			$scope.on('focus.flowupLabelsEvt', '.fl_input', function() {
				$(this).closest('.fl_wrap').addClass(settings.class_focused);
			})
			.on('blur.flowupLabelsEvt', '.fl_input', function() {
				var $this = $(this);
				
				if ($this.val().length) {
					$this.closest('.fl_wrap')
						.addClass(settings.class_populated)
						.removeClass(settings.class_focused);
				} 
				else {
					$this.closest('.fl_wrap')
						.removeClass(settings.class_populated + ' ' + settings.class_focused);
				}
			});

			if (settings.feature_onLoadInit) {
				$scope.find('.fl_input').trigger('blur.flowupLabelsEvt');
			}
		});
	};
})( jQuery );

<div class="form-group fl_wrap">
    <label class="fl_label" for="name">Name:</label>
    <input type="text" name="name" value="" id="name" class="form-control fl_input">
</div>

ну а дальше там посмотрите, как и что по стилям добавить