Javascript dynamic input mask

Question

I'm wondering if there is a plugin which will be setting mask to the input, depending on which I have already input there.

For example if I set mask of an input to numbers from 0-4, and then write '1' to the input, I want be able to write only '0', '2', '3', '4'. I have already tried following mask plugins:

http://digitalbush.com/projects/masked-input-plugin/

but I only can achieve that, the whole input clear after write character, or the caret goes to the back of the input, or I'm not able to write anything. Here is my attempts to achieve what I want:

jQuery.mask.definitions['x'] = '[123456789]';
jQuery('#inputLabel').mask("x, x, x, x, x, x, x");

and if I input something to the input I tried this: setting mask one more time

jQuery.mask.definitions['x'] = returnDistinctTab(); //returnDistinctTab return tab without character which I have already input to the input.
var text = jQuery("#inputLabel").val();
text.replace('_', 'x');
jQuery('#inputLabel').mask('text');

If someone have an idea what I'm doing wrong, or knows mask which will be suitable for my case, I will be very grateful!!

if I understand you correctly, that plugin does something else from what you're describing. You're looking for a way to limit the input to only unique numbers, while that plugin makes some readable template for entering numbers (it's close, but not exactly the same). — yuvi
– yuvi, Commented Oct 1, 2014 at 7:34
@yuvi yes it's what I want to achieve. I want to achieve dynamic input mask. If I set mask to "0123" and wrote 0, mask should change to "123", then if I wrote 1, mask should change to "23" and the text in input shouldn't disappear and caret shouldn't go to the end of the text. With this plugin I'm not able to re-set the mask without loosing what I have already wrote in input, or going caret to the end of input. — MNie
– MNie, Commented Oct 1, 2014 at 7:39

yuvi · Accepted Answer · 2015-07-24 19:41:03Z

2

you can use the oninput event, and write a simple function that enforces unique values from a list:

<script>
    function verifyInput(txt, mask) {
        var res = '';
        for (var i = 0; i < txt.length; i++) {
            var char = parseInt( txt[i] );
            if (mask.indexOf(char) > -1 && res.indexOf(char) === -1)
                res += char;

        }
        return res;
    }
</script>

<input type="text" id="unique-numbers" oninput="this.value=verifyInput(this.value, [0, 1, 2, 4])" />

It'll probably be faster than a jQuery plugin, and also easier to maintain (you're not limited to anything, really).

edited Jul 24, 2015 at 19:41

answered Oct 1, 2014 at 7:46

yuvi

18.5k9 gold badges63 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MNie Over a year ago

Looks that this is what I want to achieve! I will check this out in my code and if it works (in any browser I need) I will accept it as an answer :)

yuvi Over a year ago

@LubiePice browser compatibility for oninput is pretty solid, when even IE9 supports it. If you have to work with older browsers, take a look at modernizr which might help you make it work

MNie Over a year ago

I check this out it works fine with Mozilla 31/Chrome/IE 8+ and it's fine for me! One more time Thank You very much!

Decent Dabbler Over a year ago

I believe char in mask should be mask.indexOf( char ) > -1. char in mask checks whether the mask array has an index with the value of char, not whether it has a value with the value of char. Your example accidentally works here, because the values in mask happen to coincide exactly with its indices.

yuvi Over a year ago

@DecentDabbler you're absolutely right, fixed, thanks!

Collectives™ on Stack Overflow

Javascript dynamic input mask

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related