Remove Placeholder on Focus in Search Widget

There are two ways to do what you are asking. One, continue to use the javascript method you have in place, and change your if statement to exactly match your value:

<input type=”text” name=”s” onblur=”if (this.value == ”) {this.value = ‘Search by Ingredient, Recipe Name or Category‘;}” onfocus=”if (this.value == ‘Search by Ingredient, Recipe Name or Category‘) {this.value = ”;}” value=”Search by Ingredient, Recipe Name or Category“>

Or, a much simpler method, in your form input change value to placeholder and then add value=”” so it should be like:

<input type=”text” name=”s” placeholder=”Search by Ingredient, Recipe Name or Category” value=”” >

Hi DMBarber,

Thank you so much, I’m incredibly grateful. I used your simpler method and it’s worked a treat.

For anyone who has a search box inside a widget here is the full javascript code I used inside a child function searchform.php. This will allow you to change the text inside the search box, and the text will disappear when someone starts to type.

<form id="searchform" class="searchform" method="get" action="<?php echo get_home_url(); ?>">
    <p class="clearfix default_searchform">
	<input type="text" name="s" placeholder="Search by Ingredient, Recipe Name or Category" value=""
        	onblur="if (this.value == '') {this.value = '<?php _e('Search','graphene'); ?>';}"
            onfocus="if (this.value == '<?php _e('Search','graphene'); ?>') {this.value = '';}"
            value="<?php if ( $term = get_search_query() ) echo esc_attr( $term ); else _e( 'Search by Ingredient, Recipe Name or Category', 'graphene' ); ?>" />
        <button type="submit"><span><?php _e('Search', 'graphene'); ?></span></button>
    </p>
    <?php do_action('graphene_search_form'); ?>
</form>

Thanks again DMBarber ??

Glad I could help. All the best!

Oh, important to note. The theme I’m using is Graphene.

If you’re using a different theme your code may be different, so just have a look in your searchform.php and you’ll find it in there. Copy that code, then replace ‘Search by Ingredient, Recipe Name or Category’ with whatever you need it to be for your theme. Then put it all inside a child theme searchform.php ??