Grow your CSS skills. Land your dream job.

A question on form styling

  • # May 16, 2010 at 1:18 pm

    How do you get text into a input? I’m looking to find a way to have text in a input by default, such as chris has "search" in his input. If anyone knows how please let me know.

    Rob
    # May 16, 2010 at 1:40 pm

    what I do is use a little jQuery:

    <input type="text" name="search" value="Search…" id="search" />

    then like…

    Code:
    $(function() {
    //target search box when use focuses
    $(“#search”).focusin(function() {

    //Removes the value.
    $(this).removeAttr(“value”);

    });

    //listens for the focus out…
    $(“#search”).focusout(function() {

    //check if a user has added a value
    if($(this).val()) {

    // if they have – do nothing because you want to keep theirs

    } else {

    // If they have not, and the field is blank – add the value again…
    $(this).val(“Search…”);

    }

    });

    });

    That, although it’s the long way round code wise, should provide a solution that you can learn from :)

    # May 16, 2010 at 4:15 pm

    Although of no use to you right now, HTML5 will have an attribute called placeholder (I think) that allows you to easily set the text inside an input field. No JavaScript required!

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

You must be logged in to reply to this topic.

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