Animates Placeholder In JavaScript Plugin – placeholdem.js

Form
A JavaScript plugin that animates placeholder
File Size: 13.55 KB
Views Total: 1428 views
Last Update:March 13, 2024
Publish Date: February 08, 2014
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
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.

Related jQuery Plugins

You Might Also Like