UI_Dev UI_Dev - 4 months ago 74
CSS Question

html5 input type number with regex pattern in mobile

I'm trying to get regex pattern in input type

to show only numbers and dots.
I tried something like this.

<input type="number" pattern="[0-9.]*">

<input type="tel">

Both are showing only numbers (0-9), but not displaying . (dot). I need to use dot in input field.

Is it possible thru html5? Or Shall I go with javascript?

Note: This is working fine in Android, but . (dot) not displaying in iphones

I need to display mobile keypad like this..

enter image description here

Any help regarding this?


If you only specify "type=number" it will display keypad on iPhone like:

enter image description here

And if you specify pattern like <input type="number" pattern="\d*"/> or <input type="number" pattern="[0-9]*" />, then keypad on iPhone will be like :

enter image description here

Still it cannot display dot(.), currently there is no pattern to handle such case.

So you may opt for <input type="tel" /> which will provide keypad like:

enter image description here

Please refer to below links for more details on inputs for iOS:







Hope this will help you. :)

Updates for customization (reference: http://stackoverflow.com/a/20021657/1771795)

You can do some customization using javascript. Lets take example of currency input with decimals pattern in which e.which to read CharCode entered and then push it into an array (before) which represents digits before decimal mark and another array (after) to move values from (before) array past the decimal mark.

complete fiddle link


<input type="tel" id="number" />


Variables and functions:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

Main code:

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input

        // main array which holds all numbers

        // array of numbers before decimal mark

        // move numbers past decimal mark
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)

        // update counter

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values


// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {


enter image description here