Легкий анимированный placeholder на JS

Сегодня мы познакомимся с JS плагином Placeholdem. Это легковесный JavaScript плагин, который оживляет каретку плейсхолдера. Анимация представлена в виде постепенного удаления заполнителя при фокусировке, и его возврате при расфокусировке. Скачать.

Создаем текстовое поле с атрибутом placeholder.

<form>
	<label class="fade">
		<input name="field1" placeholder="Triggered on Focus/Blur" />
		<div class="arrow"></div>
	</label>
	<label class="fade">
		<textarea name="field2" placeholder="Inputs or Textareas"></textarea>
		<div class="arrow"></div>
	</label>
</form>

Подключаем скрипт placeholdem.min.js перед закрывающем тегом body, и запускаем все элементы с плейсхолдером.

<script src="placeholdem.min.js"></script>
<script>Placeholdem( document.querySelectorAll( '[placeholder]' ) );</script>

Оформление полей ввода.

label {
	display: block;
	position: relative;
}
textarea,
input {
	border: 2px solid #ddd;
	border-radius: 0;
	color: #999;
	display: block;
	box-sizing: border-box;
	font: 400 1em/1 "Open Sans", sans-serif;
	margin: 0 0 0.5em;
	padding: 1em 1.25em;
	width: 100%;
	-webkit-transition: border-color 300ms, color 300ms;
	transition: border-color 300ms, color 300ms;
	-webkit-appearance: none;
}
textarea:focus,
input:focus {
	border-color: #333;
	color: #333;
	outline: none;
}
textarea {
	margin: 0;
	min-height: 7.5em;
	line-height: 1.5;
	overflow: auto;
	resize: vertical;
}
.arrow {
	border-top: 9px solid #ddd;
	border-right: 9px solid #ddd;
	border-bottom: 9px inset transparent;
	border-left: 9px inset transparent;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transition: border-color 300ms;
	transition: border-color 300ms;
}
input:focus + .arrow,
textarea:focus + .arrow {
	border-top-color: #333;
	border-right-color: #333;
}