Combine numeric virtual keyboard and enterkeyhint on mobile Safari

user_79068 0
Viewed 253

I'm trying to create a form which collects a single numeric value, and would like to make the process of filling it in as easy as possible on mobile browsers.

Mobile Safari supports the use of inputmode="numeric" or inputmode="decimal" to show a number-pad style keyboard when the field is focused. It also supports the use of enterkeyhint to select the text of the 'next/done/go/enter' button ("Go" would be the most appropriate in my case)... However, it doesn't appear that these can be used together: Setting a numeric inputmode results in the enter button displaying the default 'Done' appearance.

I can't think of a reason this behaviour should be by design. Is there a workaround or something I'm missing?

<input type="text" inputmode="numeric" placeholder="I show a numeric keyboard with a default 'done' button"/>

<input type="text" enterkeyhint="Go" placeholder="I show a text keyboard with a 'Go' button"/>

<input type="text" inputmode="numeric" enterkeyhint="Go" placeholder="I show a numeric keyboard, but still with a default 'done' button"/>

mobile-safari html ios
2 Answers

Unfortunately, this does not seem to be possible.

The "Done" button shown in mobile Safari is not the enter key, but instead just a button for dismissing the keyboard. Therefore, it seems that the enterkeyhint attribute has no effect on any input mode other than text, email, search, or url because numeric keypads on iOS do not have an enter button.

In fact, the text input field has both the blue "Go" button and "Done" button, which likely means that the "Done" button above the keyboard cannot be changed.

Image showing both the Done button and Go button seperately

user_147673900 

<!DOCTYPE html>
<title>Workaround</title>
<style>button {width:50px}</style>
<form>
<input id=number readonly value=0>
<br>
<button type=button onclick="number.value = Number(number.value + 1)">1</button>
<button type=button onclick="number.value = Number(number.value + 2)">2</button>
<button type=button onclick="number.value = Number(number.value + 3)">3</button>
<br>
<button type=button onclick="number.value = Number(number.value + 4)">4</button>
<button type=button onclick="number.value = Number(number.value + 5)">5</button>
<button type=button onclick="number.value = Number(number.value + 6)">6</button>
<br>
<button type=button onclick="number.value = Number(number.value + 7)">7</button>
<button type=button onclick="number.value = Number(number.value + 8)">8</button>
<button type=button onclick="number.value = Number(number.value + 9)">9</button>
<br>
<button type=reset>Clear</button>
<button type=button onclick="number.value = Number(number.value + 0)">0</button>
<button type=submit>Go</button>
</form>

user_137441780
Related