Clear Default Search String on Focus | CSS-Tricks

PHOTO EMBED

Wed Jun 03 2020 07:32:34 GMT+0000 (UTC)

Saved by @Amna #jquery

$("#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...");
        }
    });
content_copyCOPY

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

https://css-tricks.com/snippets/jquery/clear-default-search-string-on-focus/