PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Clear Default Search String on Focus

Clear Default Search String on Focus

$("#s")
    .val("Search...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
            $(this).val("Search...");
        }
    });
  1. Set value of field to "Search..."
  2. When field comes into focus, set color to black.
  3. If value is default, remove it.
  4. When field goes out of focus, set color back to light gray.
  5. If value is empty, put back default value

Subscribe to The Thread

  1. Dyllon

    I would like the text to only go back to grey if it is the default ‘search…’ text..

    blur(function(){
    if ($(this).val() == "") {
    $(this).css("color", "#ccc");
    $(this).val("Search...");
    }

    Reply ↓
  2. StuartH

    This is perfect and has made my day! Thanks.

    Reply ↓
  3. simona

    why it doesn’t work for me?
    this is my page
    please take a look, I’m going crazy

    http://www.athenarestauri.com/prova-jquery-2.html

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~