Ghostype input Placeholder for search text fields using jQuery

>Placeholder Demo

Ghostpe Demo
$(document).ready(function(){ var search = “#home-search”; var chars = $(search).attr(‘placeholder’).split(”); $.each(chars, function(i, v){ setTimeout(function() { $(search).val((chars.slice(0, i+1).join(”))); }, 100*i); }); });
jQuery placeholder plugin can be used to display default text inside input text fields.HTML5 introduced type search fields with placeholder attribute support.
<input class="query" id="home-search" placeholder="Enter search text here" type="search" />
It should display default text “Enter search text here” inside text-field and when user tries to type something it disappears.
In order to achieve text marquee like effect to default text value with jQery use following jQuery code. It will type text character by character from left to right.
Same effect can be achieved by creating gif image of typing and placing it as background-image to text field with certain drawbacks like changing default text on the fly.
Place below code inside javascript tag in your html file
jQuery Code $(document).ready(function(){ var search = "#home-search"; var chars = $(search).attr('placeholder').split(''); $.each(chars, function(i, v){ setTimeout(function() { $(search).val((chars.slice(0, i+1).join(''))); }, 100*i); }); });
Got easy ??

Advertisements

About sandipransing

Web Developer #ruby #rails #JS
This entry was posted in Ruby on Rails and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s