Never been to DZone Snippets before?

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

About this user

Jonas Raoni Soares Silva http://www.jsfromhell.com

« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS 

Auto Tab //JavaScript Function


Auto tabulation of text inputs with maxlength setted

Usage: just add the code on the end of your page or call it on the onload event (worse solution) and "the enter tabulation" will be added for all fields enclosed by the <form> tag.

[UPDATED CODE AND HELP CAN BE FOUND HERE]


@REQUIRES Event-Listener


//Requires http://www.jsfromhell.com/Geral/event-listener

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

autoTab = function(){
	for( var d, f = ( d = document ).forms, i = f.length; i; addEventListener( f[--i], "keyup", function( e ){
		var el, k = String.fromCharCode( e.key ), l = ( e = e.target ).value.length;
		if ( l >= ( e.getAttribute( "maxlength" ) || l + 1 ) && /[\wÀ-ÿ ]/.test( k ) ){
			for( l = k = ( el = e.form.elements ).length; el[--k] != e; );
			while( !(e = el[ k = ++k * ( k < l ) ]).type || e.disabled );
			e.focus();
		}
	} ) );
};

Masked Input //Javascript Object


Simple and generic mask routine.

[UPDATED CODE AND HELP CAN BE FOUND HERE]



@REQUIRES Event-Listener

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

Enter as tab //Javascript Function


Tabulation on fields through the enter key, i didnt allowed it to work on <select> and <textarea> since the enter is required to use this fields, so find a nice place to use it :]

Usage: just add the code on the end of your page or call it on the onload event (worse solution) and "the enter tabulation" will be added for all fields enclosed by the <form> tag.

[UPDATED CODE AND HELP CAN BE FOUND HERE]


@REQUIRES Event-Listener

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

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/enter-as-tab [v1.0]

enterAsTab = function(){
	for( var f, i = ( f = document.forms ).length; i; addEventListener( f[--i], "keypress", function( evt ){
		var el, l, k = evt.key == 13, e = evt.target;
		if( k && !/textarea|select/i.test( e.type ) && !evt.preventDefault() ){
			for( l = k = ( el = e.form.elements ).length; el[--k] != e; );
			while( !(e = el[ k = ++k * ( k < l ) ]).type || e.disabled );
			e.focus();
		}
	} ) );
};



Example:

<form action="">
	<p>
	<input type="text" />
	<br /><input type="text" />
	<br /> <input type="radio" name="aaa" /> opção 1
	<input type="radio" name="aaa" checked="checked" /> opção 2
	<br /><textarea rows="3" cols="15">aaaaaa pode dar enter q ele naum pula hahah</textarea>
	<br /><select><option>opção blablablabla</option><option>opção bleblebleble</option></select>
	<br /><input type="text" />
	</p>
</form>


<script type="text/javascript">
//<![CDATA[

enterAsTab();

//]]>
</script>
« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS