Animates Placeholder In JavaScript Plugin – placeholdem.js

Form
File Size: 13.55 KB
Views Total: 1127 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
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 :

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