Not sure if anyone has come across this before, it’s a new one for me. I’m currently developing a theme that has a search form in the main sidebar which is doubling, in this case, as a header section.
The form works well from a computer, even if this screen is pulled down so it’s as narrow as it would be for a phone.
The problem is that when I try to use the form from either a tablet or phone, it doesn’t allow me to enter any text into the field. When I click on the form, my keyboard pops up on the mobile device, but nothing I enter ends up populating the field.
All other forms seem to work well from mobile devices.
Here’s my searchform.php:
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
<label for="s" class="assistive-text"><?php _e( 'Search', 'fsxo' ); ?></label>
<input type="text" class="form-control" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Search …', 'fsxo' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'fsxo' ); ?>" />
</form>
I’m calling it into the sidebar like so: <?php get_search_form(); ?>
Any help figuring this out is as always, greatly appreciated.
thanks!
UPDATE: Works on Android, just not iOS.
Make sure you set the color on mobile in CSS. Set to black just for testing if you need to.
Do you know HTML? 😉 Not sure if this is the problem but if you use
get_search_form() twice within your theme you may not use any HTML-ID property as it must be a unique identifier per definition.
Anyway you may populate both text fields in your searchforms with get_search_query().
For the query to work it is important to have method=”get” and name=”s” for the input text field.
If it is still not possible to put any text into your input fields after removing (or making unique) all ids it is probably a CSS problem (element is above your text input) or any JS problem which can not be derived from the question as it is currently asked here.