Cacher is the code snippet organizer for pro developers

https://codepen.io/sivan/pen/alKwf

//===== Jade =====
.input-row
	input(type="text"  data-input="Username").input-animate


//===== Js =====
//init animate placeholder
	$('.input-animate').each(function(){
		var current = $(this);
		var dataString = "<span class='input-placeholder-val'>"+current.data('input')+"</span>";
		current.parent().append(dataString);
		if ($(this).val()){
			$(this).attr('data-empty', !this.value);
		}
	});

	$('.input-animate').on('input', function (e) {
		$(e.currentTarget).attr('data-empty', !e.currentTarget.value);
	});
	
	$('.input-placeholder-val').click(function(){
		$(this).parent().find('.input-animate').focus(); //найти Input и повесить focus
	});
//init select

//===== Style =====
//animate input
.input-row
	position: relative
.input-placeholder-val
	position: absolute
	left 25px
	top 15px
	tr(all)
.input-animate
	display: inline-block
	z-index 20
	color black
.input-animate:focus+span,
.input-animate[data-empty="false"] + span
	top 3px
	font-size: 10px
//animate input-end