WordPress.org

Forums

[resolved] Remove Placeholder on Focus in Search Widget (5 posts)

  1. Sharon
    Member
    Posted 1 year ago #

    Hi there,

    I've put a search box in a widget at the top of my site. With some help I was able to change the search box text to what I wanted it to be. However, there's a follow on problem where the search text doesn't disappear on focus.

    I've done quite a bit of Googling and found a lot of CSS and Javascript for this. There's a whole thread on StackOverflow with a variety of solutions. I've tried them all, and then some, but nothing has worked.

    It could be me doing something wrong, I'm still new to all this so I'm muddling things out as I go. Any help or suggestions would be most welcome. You can find me site here.

    Thank you in advance :)

  2. Dennis Barber
    Member
    Posted 1 year ago #

    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="" >

  3. Sharon
    Member
    Posted 1 year ago #

    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 :)

  4. Dennis Barber
    Member
    Posted 1 year ago #

    Glad I could help. All the best!

  5. Sharon
    Member
    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic