DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Masked Input //Javascript Object

09.09.2005

| 24359 views |

        <a href="http://jsfromhell.com/forms/masked-input">
Simple and generic mask routine.

[UPDATED CODE AND HELP CAN BE FOUND HERE]
</a>


@REQUIRES <a href="http://www.jsfromhell.com/geral/event-listener">Event-Listener</a>

// REQUIRES: http://jsfromhell.com/geral/event-listener

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/masked-input [v1.0]

MaskInput = function(f, m){ //v1.0
    function mask(e){
        var patterns = {"1": /[A-Z]/i, "2": /[0-9]/, "4": /[Ã€-Ã¿]/i, "8": /./ },
            rules = { "a": 3, "A": 7, "9": 2, "C":5, "c": 1, "*": 8};
        function accept(c, rule){
            for(var i = 1, r = rules[rule] || 0; i <= r; i<<=1)
                if(r & i && patterns[i].test(c))
                    break;
                return i <= r || c == rule;
        }
        var k, mC, r, c = String.fromCharCode(k = e.key), l = f.value.length;
        (!k || k == 8 ? 1 : (r = /^(.)\^(.*)$/.exec(m)) && (r[0] = r[2].indexOf(c) + 1) + 1 ?
            r[1] == "O" ? r[0] : r[1] == "E" ? !r[0] : accept(c, r[1]) || r[0]
            : (l = (f.value += m.substr(l, (r = /[A|9|C|\*]/i.exec(m.substr(l))) ?
            r.index : l)).length) < m.length && accept(c, m.charAt(l))) || e.preventDefault();
    }
    for(var i in !/^(.)\^(.*)$/.test(m) && (f.maxLength = m.length), {keypress: 0, keyup: 1})
        addEvent(f, i, mask);
};

//]]>
</script>



Usage (sorry, i'm lazy to write a help hahaha)

<form action="">
telephone "(99)9999-9999"

<input type="text" />

date "99/99/9999"

<input type="text" />


mÃ¡scara = letter + letter withou accent + 2 numbers + "-" + anything + letter "Cc99-*C"

<input type="text" />


everything, but a, b or c "E^abc"

<input type="text" />


only a, b or c "O^abc"

<input type="text" />


just letters "C^"

<input type="text" />


just letters and also white-space "C^ "

<input type="text" />


just numbers and also the letters a, b e c "9^abc"

<input type="text" />

</form>

<script>
with( document.forms[0] ){
MaskedInput.apply( elements[0], '(99)9999-9999' );
MaskedInput.apply( elements[1], '99/99/9999' );
MaskedInput.apply( elements[2], 'Cc99-*C' );
MaskedInput.apply( elements[3], 'E^abc' );
MaskedInput.apply( elements[4], 'O^abc' );
MaskedInput.apply( elements[5], 'C^' );
MaskedInput.apply( elements[6], 'C^ ' );
MaskedInput.apply( elements[7], '9^abc' );
}
</script>

Tags:

Comments

Snippets Manager replied on Mon, 2012/05/07 - 2:14pm

This code looks like crap for me, I'll update whenever I find time and good mood :)

Snippets Manager replied on Sat, 2008/02/16 - 9:26am

event.js was not included i copied it its works great know. Thanx anyway...

Snippets Manager replied on Sat, 2008/02/16 - 9:26am

Hi! Your exapel works great but when i dowloaded the source didnot work. It couses an error that says "addEvent is not defined". Your post is so old, i hope you wil help me. Thanx