Grow your CSS skills. Land your dream job.

Add and remove label to input field

  • # April 26, 2012 at 6:35 am

    If I’m using this snippet

    $('input#news-name').val( "Name" ); 

    it will append the “Name” to my input field…. but I want it to disappear again when I click at the input field ???
    Pleas help :-)

    # April 26, 2012 at 8:08 am

    Mouse simple way is just to use the defaultValue property in the element object and some jQuery events.

    $('.placeholder').each(function() {
    $(this).on({
    focus : function(e) {
    if ($(this).val() === this.defaultValue) {
    $(this).val('');
    }
    },
    blur : function(e) {
    if ($(this).val() !== this.defaultValue) {
    $(this).val(this.defaultValue);
    }
    }
    });
    });

    You can see it in action here

    # April 26, 2012 at 8:10 am

    have you heard of the placeholder attribute?
    Check out this article. Look for the title “Placeholder functionality fallback – jQuery with Modernizr”. If you have Modernizr included and the placeholder attribute applied to the input elements it will work well for everyone.

    # April 26, 2012 at 9:02 am

    @SgtLegend
    Hi …. and thanks
    I’m working on a Drupal 7 website with jQuery 1.4 …. and I think your solution required jQuery 1.7 ???

    # April 26, 2012 at 9:04 am

    Simply change the on method to bind and it will work the exact same way

    # April 26, 2012 at 9:11 am

    wauw …… you just saved my day :-)

    # April 26, 2012 at 9:12 am

    @jamy_za
    And thanks to you …. :-)

    # April 26, 2012 at 9:29 am

    @SgtLegend
    Ups ….. now I can’t use the inputs ….. the script also remove what I write in the input fields

    # April 26, 2012 at 12:31 pm

    Yep anything you enter gets removed on loss of focus and also if javascript is disabled then you have to manually remove the content before typing inside which is annoying as hell for the user.

    Just using

    ​​​​​​​​​​​​​​​​​​​​

    will work on all html5 browsers? I am guessing you’re looking for a wider range than that?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".