How to make jquery.inputmask work with input type=number?

Question

I have the code working fine using this plugin as long as the input type=text, but I would like to use type=number so the proper keyboard is shown on mobile devices.

Is there a way to do this, hopefully with some setting I have missed in the documentation?

Here is my html:

<input id="Price" name="Price" type="number" placeholder="0.00" tabindex="3"/>

Here is my js:

$(document).ready(function(){
    $('#Price').inputmask("[9][9]9.99", {
        numericInput: true,
        "placeholder": "0",
        showMaskOnHover: false,
        greedy: false
    });
});

Answer 1

The jQuery Inputmask plugin (http://plugins.jquery.com/jquery.inputmask/) uses setSelectionRange, selectionStart, selectionEnd (in https://github.com/RobinHerbots/jquery.inputmask/blob/3.x/js/jquery.inputmask-multi.js). These properties/methods have been dropped on <input type="number"/> fields in Chrome when they updated to conform to a W3C change.

If you feel the W3C change to remove these features on number fields was in error, please vote for the Bugzilla bug #24796

There are some hacks to workaround this issue or you may need to resort to using <input type="text">

Answer 2

I have found that using <input type="tel" /> allows for numeric inputs on cell phones, and also allows all the same events to fire as type="text"!

Browsers without support for these types will fall back to using the "text" type.

http://www.caniuse.com/#search=tel

Hopefully this helps someone else.

Answer 3

My solution is add pattern="[0-9]*" to input type="text", or if it didn't work, use input type="tel" - that allows for numeric inputs on phones