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

Nathaniel picture Nathaniel · Jul 25, 2014 · Viewed 12.3k times · Source

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

scunliffe picture scunliffe · Jul 25, 2014

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">