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

Leave a Reply

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.