html5 input type number with regex pattern in mobile

I’m trying to get regex pattern in input type number 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.

  • How to add “Done” button to Numpad in IOS 8 using Swift?
  • 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?

    4 Solutions Collect From Internet About “html5 input type number with regex pattern in mobile”

    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:

    http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/

    http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

    https://about.zoosk.com/nb/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

    http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types

    http://www.petefreitag.com/item/768.cfm

    http://html5tutorial.info/html5-contact.php

    Hope this will help you. 🙂

    Updates for customization (reference: https://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

    HTML:

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

    JS

    Variables and functions:

    // declare variables
    var i = 0,
        before = [],
        after = [],
        value = [],
        number = '';
    
    // reset all values
    function resetVal() {
        i = 0;
        before = [];
        after = [];
        value = [];
        number = '';
        $("#number").val("");
        $(".amount").html("");
    }
    
    // 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
            $(this).val("");
    
            // main array which holds all numbers
            value.push(number);
    
            // array of numbers before decimal mark
            before.push(value[i]);
    
            // 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)
            $(this).val(addComma(val_final));
    
            // update counter
            i++;
    
            // for demo
            $(".amount").html(" " + $(this).val());
    
        } else {
    
            // reset values
            resetVal();
        }
    });
    

    Reset:

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

    Result:

    enter image description here

    Not every input type and attribute is supported in all browsers. In general, most modern browsers from IE10+ include basics such as email and number.

    The browser will revert to a standard text input when a specific type and ignore attributes when those values are not supported.

    enter image description here
    enter image description here

    So you should use a good regular expression pattern.

    for example

    <input type="tel" name="tel" pattern="^(?:\(\d{3}\)|\d{3})[- . ]?\d{3}[- . ]?\d{4}$" />
    
    • 1234567899
    • 123 456 7899
    • 123-456-7899
    • 123.456.7899

    supported

    Browser support for ‘tel’ type

    • Android (yes)
    • iOS (yes)
    • IE (yes)
    • Mobile (yes)
    • Opera (yes)
    • Mobile (yes)
    • Opera (yes)
    • Classic (yes)
    • Opera Mini (no)
    • Firefox (yes)
    • Mobile (yes)
    • Chrome for Android (yes)

    (Sources: caniuse.com, DeviceAtlas, mobilehtml5.org)

    Browser support for pattern attribute

    But the pattern attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome.
    And is not supported in Internet Explorer 9 and earlier versions, or in Safari.

    Unfortunately it’s not possible to achieve the exact functionality that you’re looking for is not possible. However there is a kind of “hack” available which will give similar functionality:

    http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/

    It’s a bit of JS which fills in the decimal automatically when the user starts typing, like this: 0.01 -> 0.12 -> 1.23 -> 12.34 . So this can be used for similar effect.

    I had a similar scenario whereby I needed to support both comma and point as both the decimal mark and digit grouping [see here]

    E.g.

    1.00 / 1,00
    1,000,000.00 / 1.000.000,00

    At the same time the scenario required that the number keypad was displayed on mobile devices.

    The initial implementation combined the ‘number’ type with the pattern attribute.

    <input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
    

    However the number validation failed inputs that the pattern would allow. This meant the field and thus form were marked as invalid.

    The solution was to change the type to ‘tel’.

    <input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
    

    Mobile users would now see a number keypad by default, and the pattern validation would be used to validate the input.