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
    });
});

Newel

If the plugin does anything with reading or setting the cursor position or selecting/inserting text you'll have issues on Chrome for sure due to changes they made. See this question: #22382337 – Colbycolbye

@Colbycolbye thanks for pointing me in the right direction. I will change the input to text for now and wait to see if the cursor position issue is resolved in chrome. – Newel

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

Colbycolbye

The inputmask plugin doesn't appear to have any support for the number input in any browser. I have tested my code in the latest of FF, IE, Opera and Chrome, but it only works if the type is set to text. Do the other browsers have the same features on number fields? – Newel

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.

Jaclyn

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

Jidda