3

I have a very detailed and very long/large ordinary html search input form with keyword text-input, price range min/max, and many, many other search criteria.

Submit button is present, but it is all the way down at the end of the form.

<form action="http://..." method="get" class="some-class" onsubmit="">
<fieldset class="box options">
    <input type="text" name="pattern" id="pattern" placeholder="pattern" value="" />
    <input type="text" id="city" name="city" placeholder="city" value="" />
    <input type="text" id="region" name="region" placeholder="region" value="" />
    <input type="text" id="country" name="country" placeholder="country" value="" />
    <input type="text" id="price-min" name="price-min" placeholder="min" value="" />
    <input type="text" id="price-max" name="price-max" placeholder="max" value="" />
    (etc...)
    <button id="search-submit" type="submit">SUBMIT</button>
</fieldset>
</form>

Now, my problem is completely the opposite of what I've seen in the questions/issues here and searching around the web. Most had the opposite issue trying to actually get Next instead of Go, but I need the reverse (or old) behavior. Instead of new Next while "inside" (in focus) on each text input fields above, I would like to see good old simple Go.

Why? Because, these inputs are not data-dependent, each input in the form can be provided separately.

It is probably a relatively recent change in Chrome Android browser (currently tested latest Chrome App for Android 62.0.3202.84) and potentially few other browsers/mobile OS apps. But, it was not like this before, that's for sure.

I wish we had a way to stop this behavior and manually instruct mobile browsers or virtual keyboards how they should behave, as it is really annoying to have Next in a massive search filter form, where someone just wants to fill in first or few initial inputs like keyword and press Go, because in long forms submit button is all the way down.

Does anyone have any idea how can we fix this, without re-inventing my entire form?

Thanks

dev101
  • 1,359
  • 2
  • 18
  • 32
  • There is one very very ugly solution I'm thinking of: to split my form in 2 (or N smaller parts), and then clone all the other field values with javascript, so, whichever form (scenario) user does, all relevant parameters will be saved in all of them and form will work overall as original one. But, I don't like it much, as it is really "hackish" solution in nature. – dev101 Dec 04 '17 at 01:03
  • Another, much more acceptable idea (but still not true solution), is to simply clone submit button near the top after "priority" inputs, so the users can simply click on submit. – dev101 Dec 04 '17 at 01:16

1 Answers1

4

I ran into this issue and the solution I found was to simply set type="search" instead of type="text" on the inputs.

Inspired from: Show 'Search' button in iPhone/iPad Safari keyboard

Trang
  • 426
  • 3
  • 4
  • I've completely forgotten this question to be honest. Thanks! – dev101 Nov 03 '18 at 01:37
  • 1
    For completeness, this "issue" (behavior) affects only input type="text" fields, if the form has other types like check boxes and drop down lists, they are ignored from the next-next-next, adding further inconsistency/annoyance. Marking your answer as accepted! – dev101 Nov 03 '18 at 01:39