Animates Placeholder In JavaScript Plugin – placeholdem.js

Form
Demo    Download
A JavaScript plugin that animates placeholder
File Size: 13.55 KB
Views Total: 389 views
Last Update:November 05, 2020
Publish Date: February 08, 2014
Official Website: Go to website
License: MIT
Plugin Author: jackrugile

Placeholdem.js is a placeholder JavaScript plugin. A animation and text caret into the text input area. Placeholder values will gradually remove the focus and blur recovery. The placeholder value will delete on focus, and visible agin on blur when focus out.

Table of Contents

How to use it:

1. Load the jQuery placeholdem Loader plugin.

<script src="placeholdem.min.js"></script>

2. Create a container element as this:

<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>

3. run Placeholdem on all elements with placeholders

<script>
			Placeholdem( document.querySelectorAll( '[placeholder]' ) );

			var fadeElems = document.body.querySelectorAll( '.fade' ),
				fadeElemsLength = fadeElems.length,
				i = 0,
				interval = 50;

				function incFade() {
					if( i < fadeElemsLength ) {
						fadeElems[ i ].className += ' fade-load';
						i++;
						setTimeout( incFade, interval );
					}
				}

				setTimeout( incFade, interval );
		</script>

Done

List Of Version :
  • v1.0.2
  • v1.0.1
  • v1.0.0
  • v0.0.3
  • v0.0.2
  • v0.0.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.