Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Add and remove label to input field

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #37791
    Morten
    Participant

    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 :-)

    #101791
    SgtLegend
    Member

    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

    #101793
    jamygolden
    Member

    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.

    #101796
    Morten
    Participant

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

    #101797
    SgtLegend
    Member

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

    #101798
    Morten
    Participant

    wauw …… you just saved my day :-)

    #101799
    Morten
    Participant

    @jamy_za
    And thanks to you …. :-)

    #101800
    Morten
    Participant

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

    #101816
    StevenBullen
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.