enavu webdevmania tutsvalley psdestination
visit the enavu network
6 Comments Article Title Overlay Article Title

Description text inside an input field

Demo     Source
HTML

<input type=’text’ class=’description_active’ value=’Click to see the effect…’>

jQuery

$(document).ready(function() {
$(‘.description_active’).click(function(){
$(this).removeClass(‘description_active’).val(”);
});
});

Pretty simple, we have an input field with class ‘description_active’ and a default value assigned to [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo     Source

HTML

<input type='text' class='description_active' value='Click to see the effect...'>

jQuery

$(document).ready(function() {
        $('.description_active').click(function(){
            $(this).removeClass('description_active').val('');
        });
 });

Pretty simple, we have an input field with class ‘description_active’ and a default value assigned to it with HTML. When it’s clicked we remove the class so it’s no longer counted as an input with description text in it, and set the value to ” (nothing). :)

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Automatic input field focus on page load
  2. jQuery focus on first field trick
  3. Use HTML5 Placeholder Input Attribute Today using jQuery!
  4. Verticaly center an image inside a div
  5. PHP Smart Date Parsing: Natural Language Input (task.fm explained)

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • how can i show back a help value after moving the cursor?

  • Sorry, didn’t understand the question.

    After moving the cursor where?

  • I think he meant if you tab into the field and then tab out without typing anything he wants the hint to come back.

  • Thanx man. It worked as a charm. But what [spite] said; When you click in the input box the text dissapears right? but when you click something else on the site the text/value (Click to see the effect…’) doesn’t RE-appear. How to do that?

  • Use this :) http://web.enavu.com/design/advanced-jquery-placeholder-plugin-cross-browser-support/

    its really awesome

  • I’ve just started a blog, and my first post was very similar to this.

    I’ve basically got the same tutorial, except when you click out of my text field with no text the original description returns:

    http://paulmason.name/blog/item/descriptions-in-text-fields

    Think it was what you guys might have been looking for.

    It was written with MooTools but originally with just plain js. Let me know if you interested in the plain js version.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting