When specifying "type=number" alone, the keypad on an iPhone will look like this:
If you add a pattern such as
<input type="number" pattern="\d*"/>
or
<input type="number" pattern="[0-9]*" />
, then the iPhone keypad will appear as follows:
However, note that it still cannot display a dot (.), as there is currently no pattern to handle this case.
You can consider using <input type="tel" /> which provides a keypad like this:
For more information on inputs for iOS, please check out the following links:
https://developer.mozilla.org/en-US/docs/Web/HTML/Input_element#The_step_attribute
https://css-tricks.com/instantly-preview-form-values-using-clever-active-fill-css-that-do-not-change-page-appearance/
I hope this information proves useful to you. :)
Customization Updates (source: )
You have the option to customize using JavaScript. For instance, you can create a currency input with decimal pattern where e.which reads the entered CharCode and pushes it into two arrays - one for digits before the decimal mark and another for values after the decimal mark.
Click here for a complete example
HTML:
<input type="tel" id="currency" />
JavaScript:
Variables and functions:
// declare variables
var i = 0,
before = [],
after = [],
value = [],
currency = '';
// reset all values
function clearValues() {
i = 0;
before = [];
after = [];
value = [];
currency = '';
$("#currency").val("");
$(".amount").html("");
}
// adding a comma for thousand separator
function insertComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Main code:
// listen for the keyup event
$("#currency").on("keyup", function (e, v) {
// allow only numbers (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
currency = String.fromCharCode(e.which);
// hide the entered value in the input field
$(this).val("");
// main array holding all numbers
value.push(currency);
// array for numbers before the decimal mark
before.push(value[i]);
// move numbers past the decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final currency value
var finalCurrency = after.join("") + "." + before.join("");
// display the formatted value with commas
$(this).val(insertComma(finalCurrency));
// update the counter
i++;
// for demonstration purposes
$(".amount").html(" " + $(this).val());
} else {
// reset all values
clearValues();
}
});
Reset Function:
// clear arrays when clear button is clicked
$(".ui-input-text .ui-input-clear").on("click", function () {
clearValues();
});
Result: