Animates Placeholder In JavaScript Plugin – placeholdem.js

Form
Demo    Download
A JavaScript plugin that animates placeholder
File Size: 13.55 KB
Views Total: 223 views
Last Update:November 21, 2020
Publish Date: September 20, 2020
Official Website: Go to website
License: MIT

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.

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


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.