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

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: http://stackoverflow.com/questions/22381837/how-to-overcome-whatwg-w3c-chrome-version-33-0-1750-146-regression-bug-with-i — scunliffe, Jul 24 '14 at 22:58
@scunliffe 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. — Nathaniel, Jul 25 '14 at 14:01

score 7 · Accepted Answer · edited May 23 '17 at 12:34

7

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

edited May 23 '17 at 12:34

Community

1
1

answered Jul 25 '14 at 14:22

scunliffe

62,582
25
126
161

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? – Nathaniel Jul 25 '14 at 14:28

score 6 · Answer 2 · answered May 11 '17 at 15:30

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.

score 2 · Answer 3 · answered Nov 08 '17 at 01:44

2

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

answered Nov 08 '17 at 01:44

Радислав Ялилов

71
1
4

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

3 Answers3

Linked