3

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

Blackbam
  • 17,496
  • 26
  • 97
  • 150
Eric Brockman
  • 824
  • 2
  • 10
  • 37

2 Answers2

0

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

jimboobrien
  • 51
  • 5
  • Set colour of input field? it is set. Not sure if you're suggesting the text that would be entered is the same colour as the background, but in that case it would still work when the user presses enter (submit). Currently, it doesn't, though. – Eric Brockman Mar 15 '16 at 16:27
  • Then, I recommend turning off all plugins to see if it a jquery conflict. Tbh I've had problems with themes like that in the past and after removing all plugins I usually found the problem. Also, try removing the class submit from the submit button or rename it and see if you get different results. – jimboobrien Mar 18 '16 at 15:45
0

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.

Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • 1
    Yes, it would have been rather difficult to build this theme without knowing HTML. `get_search_form()` is only called once in the theme. method is set to get, and name is set to 's'. As I mentioned, it works fine on computers, and I can click on it from mobile (or the keyboard wouldn't show up) so I think it's in front on the z-axis, but nothing entered into the keyboard populates the input field. – Eric Brockman Mar 15 '16 at 16:22
  • The HTML thing was just a joke. Is the problem true for all mobile devices (Android as well as IPhone). Did you try with the mobile device debugger tools / emulators of Google Chrome? Is the problem existing there? May there be any Javascript which empties the input field on keydown or sth. like that? – Blackbam Mar 15 '16 at 16:51
  • Cheers, I haven't tested android, but it's not working on iOS. I'll look into device debuggers, not sure that I have any installed atm. As for the js, I doubt it, as all other form fields work from mobile devices. – Eric Brockman Mar 15 '16 at 17:12
  • So must be an iOS issue, as I just tested it on android and it worked. – Eric Brockman Mar 15 '16 at 17:45
  • @Eric: You do not have to install any device debuggers seperatly those are part of Google chrome. – Blackbam Mar 15 '16 at 18:01
  • Maybe one of those helps: http://stackoverflow.com/questions/25610517/ios-devices-issues-with-html-form-input-type-text, http://stackoverflow.com/questions/11494687/input-type-text-does-not-work-on-iphone, http://stackoverflow.com/questions/15278930/ipad-is-not-writing-text-in-the-input – Blackbam Mar 15 '16 at 18:04