Force numpad on iPad when focusing on textbox in our website

Question

Hi we have an HTML5 website which will be accessed via iPad (similar to kiosk application). Website prompts user to type their PIN number. What I want is to force iPad to display numpad keyboard when user focuses on PIN textbox. It will be used by very old people and by default to switch to numpad in iPad keyborad you have to click "123" button. Older people wouldn't know that.

Can I use something like

<input type="number" />

Answer 1

You can set the textfield's type in the number and it'll display a standard 1-9 dialpad-style keyboard.

Example:

<input type="number" />

Source: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/InputTypes.html

Answer 2

You can use HTML5's new textbox type (number). It defaults to a regular textbox when the browser not that you'll need it. To use it set the input type to number. Eg:

<input type="number" />

An alternate solution is to use Javascript. You can use the jQuery UI's number picker, a plugin such as jStepper or just add the code below to restrict a normal textbox.

$(document).ready(function() {
    $(".text_field").keydown(function(event) {
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
         // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) || 
         // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    else {
        // Ensure that it is a number and stop the keypress
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

});

Source: How to allow only numeric (0-9) in HTML inputbox using jQuery?