Active Placeholder

A Javascript library (object?) to animate placeholder text in input fields.

Basic use

Create an ActivePlaceholder tied to the input it will control. Once started, the activePlaceholder.base string will always be visible, and the ActivePlaceholder will cycle through the strings in the activePlaceholder.placeholders array.

<input type="text" id="input1" placeholder="Placeholder">
<a onclick="activePlaceholder1.start();return false;">Start!</a>
<a onclick="activePlaceholder1.stop();return false;">Stop!</a>
<script>
	var input1 = document.getElementById('input1');
	var activePlaceholder1 = new ActivePlaceholder(input1);
	activePlaceholder1.base = 'Pillow: ';
	activePlaceholder1.placeholders =
		['firefly', 'rain', 'disappointment'];
</script>

activePlaceholder.base and activePlaceholder.placeholders can also be set in the constructor.

<input type="text" id="input2" placeholder="Placeholder">
<script>
	var input2 = document.getElementById('input2');
	var activePlaceholder2 = new ActivePlaceholder(
		input2, 'Flowers', ['hardstyle', 'wrists']);
	activePlaceholder2.start();
</script>

Controlling timing

Animation is divided into four segments: base, build, full, and remove. Their durations are defined in frames, with the animation running at 24fps unless changed in active-placeholder.js.

<input type="text" id="input3" placeholder="Placeholder">
<script>
	var input3 = document.getElementById('input3');
	var activePlaceholder3 = new ActivePlaceholder(
		input3, 'Eyelids ', ['Gatorade']);
	activePlaceholder3.fBase = 24;
	activePlaceholder3.fBuild = 12;
	activePlaceholder3.fFull = 48;
	activePlaceholder3.fRemove = 2;
	activePlaceholder3.start();
</script>

These can be set in the constructor as well.

<input type="text" id="input4" placeholder="Placeholder">
<script>
	var input4 = document.getElementById('input4');
	var activePlaceholder4 = new ActivePlaceholder(
		input4, 'Chicken ',
		['Soccer', 'Turbulence', 'Polar Bears'],
		1, 48, 24, 12);
	activePlaceholder4.start();
</script>