Mobile Safari - How to Default to Full Numeric Keypad for Decimal Entry w/o type="number", or disable Safari input type="number" correction

Question

I have a fairly basic but frustrating problem, essentially I've been trying to force input fields to behave more like text input types (where they do not correct incorrect number entries, such as "0..7" to truncate to "0") and just let JS form validation and backend validation do its job. However, while I want to allow the user to enter whatever they want in the field (input type="text"), I want to FULL numberpad keyboard to display.

Original:

<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5 />

Attempts to fix:

Works on iPad, but NOT on iPods, as iPods display the compact number pad WITHOUT decimal points:

<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d*"/>

Doesn't work on iPod, as it displays the full text keyboard, but doesn't default to the "number side" of the full keyboard with a decimal:

<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d+(\.\d*)?"/>

Anyone have any ideas? Either to prevent Mobile Safari from correcting input number types (number types display the correct keyboard on iPods and iPads, but has built in correction on fields when the keyboard hides), or to force the keyboard to be on the Number side of the full iPod keyboard?

FYI: This sounds very similar to my issue, however I may need a different solution. Sounds like they desired the "Full" numeric keyboard to appear by default but without number autoformatting that Safari does on the field when entering other characters in.

Force a numeric keyboard but allow punctuation: HTML5, mobile Safari

Answer 1

I know this is old but I see this being asked quite a lot.

To prevent validation of the number input type (and other types) you can use the novalidate attribute on the <form> element:

<form novalidate>
  <input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5>
</form>

You'll still get the numeric keyboard but it won't force the user to enter numbers only.