如何更改PHP搜索表单中的值（焦点/模糊）？

Question

In a search form I want to change the initial value in the search field from 'Your Search' to ' ' (none) as the user enters the search field (on focus) and to change it back to the original value when the user leaves the field without entering a search (on blur). The Boilerplate function I am using is this:

    function boilerplate_search_form ( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div>
    <label class="screen-reader-text" for="s">' . __('Search for:','luchtspin') . '</label>
    <input type="search" placeholder="' . __('', 'luchtspin') . '" value="'. __('Your search','luchtspin') .'" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search','luchtspin') .'" />
    </div>
    </form>';
    return $form
    }
    add_filter( 'get_search_form', 'boilerplate_search_form' );

I was thinking along the lines of adding the code below, but obviously I can't just throw in an if statement and that is exactly where my PHP skills stop.

    onfocus=if (form.value == "'. __('Your search','luchtspin') .'") {form.value = '';} onblur=if (form.value == '') {form.value = "'. __('Your search','luchtspin') .'";}

This is probably not too difficult. For good measure a link to the site with the search form: www.luchtspin.nl. Anyone who can assist me with this?

Answer 1

Just use the HTML5 placeholder attribute. <input type="text" name="query" placeholder="Your Search">

Answer 2

You can use jQuery for this task

$("input").blur(function() {
    if($.trim($(this).val()).length == 0)
        $(this).val($(this).data('last_value'));
}).focus(function() {
    $(this).data('last_value', $(this).val());
    $(this).val("")
});