`` does not display a number keypad on iOS

Keys to guarantee the numeric keypad

In addition to the basic pattern attribute set to value \\d*, more options are available for a smoother UX on iOS devices. The inputmode="decimal" attribute is suitable for inputs requiring decimal numbers, presenting a keypad inclusive of fractional numbers.

<input type="number" pattern="\\d*" inputmode="decimal">


For intricate number formats, such as telephone numbers, input type="tel" serves as a reliable alternative. This triggers a numeric keypad, which is widely supported:

<input type="tel" pattern="\\d*">


However, be aware of iOS version compatibility with the inputmode attribute to ensure the expected behavior. Some older iOS versions might not support inputmode correctly, so testing across different iOS versions is recommended.

Use JavaScript for validation

While configuring your HTML input field, consider JavaScript validation to ensure correct data reception. By adding event listeners to prevent non-numeric inputs, you increase the stability of your form:

// This little jQuery friend does not allow non-numeric values.
$('input[type="number"]').on('keypress', function(e) {
    if (e.which < 48 || e.which > 57) {
        e.preventDefault();
        return false;
    }
});


Remember, the client-side validation should be in sync with server-side validation to take care of any unexpected non-numeric inputs.

Focus on user experience

UX plays an essential role when setting up input fields. All "number" type fields may not require a numeric keypad instantly visible. Address or zip code fields, where users might input letters or other characters, should have the appropriate attributes for the optimal keyboard display:

<input type="text" inputmode="numeric" pattern="\\d*">


For inputs on iPad, handle ambiguous keys with extra care. iPads have varied keyboard layouts so make sure your method for suppressing undesired keys works effectively across different models.

Overcoming exceptions and enhancing UX

Although HTML5 offers us the type="number" directive, it does present some quirks. iOS might not consider comma-separated or space-separated numbers as numeric inputs:

<input type="number" pattern="[\\d, ]*">


In such scenarios, UX could suffer. Therefore, use attribute modifiers such as inputmode and pattern to let the input type guide you. To securely handle keypress events and suppress undesired characters, use jQuery:

//This little jQuery fellow politely turns away unwanted guests (AKA non-numeric values)
$('input[type="number"]').on('keypress', function(e) {
    // Regex to match the allowed keys
    var regex = new RegExp("^[0-9,\\b]+$");
    var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (!regex.test(key)) {
        e.preventDefault();
        return false;
    }
});


Ensure the UX is lenient by testing on different iOS versions and devices, especially when entering crucial details like payment or personal information.