Input labels animation

AnimateInputLabel.md

Animate labels around input fields

Example here: https://jsfiddle.net/gh/gist/library/pure/01c0ebfb0c0eec71fc9c3cff652974f1

fiddle.css

form { background-color: #eeeeee; }

form div {
	display: inline-block;

	margin-top: 2.6ex;

	position: relative;
	background-color: #cccccc;
}

input[type=text] { border: none; }

input[type=text]:focus {
	outline: none;
	border: 1px solid black;
}

label {
	position: absolute;
	top: 0;
	left: 0.1em;

	-webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
	transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

label.active {
	top: -2.6ex;
	left: 0;
	font-size: small;
}

fiddle.html

<form>
	Some text
	<div>
		<label for="a">Label for A</label>
		<input type="text" name="a" id="a" value="" placeholder="(a)">
	</div>

	<div>
		<label for="b" class="active">Label for B</label>
		<input type="text" name="b" id="b" value="xxx" placeholder="(b)">
	</div>

	<div>
		<label for="c">Label for C</label>
		<input type="text" name="c" id="c" value="" placeholder="(c)">
	</div>
	Some text
</form>

fiddle.js

document.querySelectorAll("form input[type=text]").forEach(function (inp) {
	let ph = "placeholder",
		xd = "x-data-",
		preparePlaceholder = function (i) {
			i.setAttribute(xd + ph, i.getAttribute(ph));
			i.removeAttribute(ph);
		},
		removePlaceholder = function (i) {
			i.removeAttribute(ph);
		},
		restorePlaceholder = function (i) {
			i.setAttribute(ph, i.getAttribute(xd + ph));
		},
		cl = "active",
		getLabelFor = function (i) {
			return document.querySelector("label[for=" + i.getAttribute("id") + "]");
		},
		lbl = getLabelFor(inp);

	/*init*/
	if (inp.value === "")
		lbl.classList.remove(cl);
	else
		lbl.classList.add(cl);
	preparePlaceholder(inp);

	inp.addEventListener("focusin", function (ev) {
		let lbl = getLabelFor(ev.currentTarget);
		//console.log("focusin", ev.currentTarget, ev.currentTarget.value);
		lbl.classList.add(cl);
		restorePlaceholder(ev.currentTarget);
	});

	inp.addEventListener("focusout", function (ev) {
		let lbl = getLabelFor(ev.currentTarget);
		//console.log("focusout", ev.currentTarget, ev.currentTarget.value);
		if (ev.currentTarget.value === "") {
			lbl.classList.remove(cl);
			removePlaceholder(ev.currentTarget);
		}
	});
});

fiddle.manifest

name: AnimateInputLabel
description: Animate labels around input fields
authors:
  - D. Faure
wrap: b
panel_js: 0
panel_css: 0