Ghost-Type input Placeholder for search text fields using jQuery

Blog Logo
on



1 min read

Placeholder Demo:
<input type=text placeholder=’Enter search text here’/>
Click on input box and placeholder text will disappear.

Ghost-type Demo:

After page load observe inside input box to enter placeholder text char by char.

jQuery placeholder plugin can be used to display default text inside input text fields. HTML5 introduced type search fields with placeholder attribute support.

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'><input class=”query” id=”home-search” placeholder=”Enter search text here” type=”search” /></div></div></pre></div>

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

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>#jQuery Code </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>$(document).ready(function(){ </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'> var search = "#home-search"; </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> var chars = $(search).attr('placeholder').split(''); </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> $.each(chars, function(i, v){ </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> setTimeout(function() { </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> $(search).val((chars.slice(0, i+1).join(''))); </div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> }, 100*i); </div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> }); </div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'>});</div></div></pre></div>

Got easy ??

Written by
Blog Logo

Sandip Ransing

Published

Supported by
Image

Fun On Rails

Journal of a Web Developer #ruby #rails #JS

Back to Overview