Search Bar Say Search... [V5]

Ever wanted the search bar to actually say search? V5 Only...

Just use this script in Extra Header Code -> Code Injection to insert the text “Search…” into the search bar. It clears upon focus and replaces the text if the bar is still blank when it leaves focus. To change the default text, replace the string in the first line of the script (variable sTxt).

It uses the Squarespace native YUI 2 Library and is compatible with multiple search bars.

<script type="text/javascript">
/*<![CDATA[*/
var sTxt = 'Search...';
function clsSearch(e) {
    if (YAHOO.util.Dom.getAttribute(this, 'value') == sTxt) {
        YAHOO.util.Dom.setAttribute(this, 'value', '');
    }
}
function repSearch(e) {
    if (YAHOO.util.Dom.getAttribute(this, 'value') == "") {
        YAHOO.util.Dom.setAttribute(this, 'value', sTxt);
    }
}
function initSearch() {
    YAHOO.util.Dom.batch(
        YAHOO.util.Dom.getElementsByClassName('queryField'),
        function(e) {
            if (YAHOO.util.Dom.getAttribute(e, 'value') == '') {
                YAHOO.util.Dom.setAttribute(e, 'value', sTxt);
            }
            YAHOO.util.Event.addListener(e, "focusin", clsSearch);
            YAHOO.util.Event.addListener(e, "focusout", repSearch);
        }
    );
}
YAHOO.util.Event.onDOMReady(initSearch);
/*]]>*/
</script>