WP; Can not enter text into search input field from iOS mobile device

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.

Read More

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 &hellip;', '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.

Related posts

2 comments

  1. Make sure you set the color on mobile in CSS. Set to black just for testing if you need to.

  2. 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.

Comments are closed.