Input mask - a script that automatically enters a specified character at a certain point in a text box.

• Download source files - 1.23 Kb

Introduction

Some times when creating forms, we like to use something that's called an "input mask". An input mask is something that, (most times) as you're typing in (let's say) a text box, certain characters will automatically be entered into the textbox.

For example: if I had a text box that is supposed to hold a phone number and I want the phone number to be formatted like so "111-111-1111", in such a case the input mask will automatically enter the "-" character after the third and sixth characters, in order that the user does not have to do it.

In my script, those characters MUST be included.

Script breakdown and explanation

<form name="form" action="" method="post">

<input name="Field1" value="" type="text" 

onKeyUp="javascript:return mask(this.value,this,'3,6','-');"

onBlur="javascript:return mask(this.value,this,'3,6','-');"

style="font-family:verdana;font-size:10pt;width:110px;"

maxlength="11">

</form>

The first 3 lines are (hopefully) self understood, however I will explain them: the <form> tag can be edited, although all that needs editing is the action="".

The <INPUT> tag is set to call the JavaScript function (below) named mask, it passes 4 parameters to the function,

1. str - the value of the current textbox control,
2. textbox - the actual textbox object, (so that the value can be set)
3. loc - a string of multiple locations to place the specified character,
4. delim - the character (delimiter) that you want to use a separator.

The maxlength value is set to a length of 11 since I would like 9 characters and 2 "-" characters.

The mask function is called in 2 places (1: onKeyUp, so that as the user types, the field will be edited, 2: onBlur, this is not needed, but it's just in case)

Below is the function line by line explained:

function mask(str,textbox,loc,delim){

Begins the function with a name mask, and sets 4 parameters, as mentioned above.

var locs = loc.split(','); 

Creates an array out of multiple numbers (to add each separator on its own).

for (var i = 0; i <= locs.length; i++){

Begins a loop through the array of locations.

for (var k = 0; k <= str.length; k++){

Begins a nested loop through each character to check if the delimiter is already there.

if (k == locs[i]){

Begins a conditional statement that checks to see what character number we are holding.

if (str.substring(k, k+1) != delim){

Begins a nested conditional statement if the character we're holding is the correct character location, and checks to see if it is the same character as the delimiter.

str = str.substring(0,k) + delim + str.substring(k,str.length)

if the character is not the same as the delimiter, it will cut the value in half and insert the delimiter

}

}

}

}
textbox.value = str

This sets the value of the textbox control being edited

}

There you have it, the complete script. If you would like to test the script, click here.

Conclusion

Nothing in the function needs editing, and only the last 2 parameters of the textbox that calls the function should be edited, although a user can do as he wills.

Notes:

This script works well in Netscape 6+ and IE 4+. In Netscape 4, after the JavaScript edits the field, the cursor will go to the beginning of the field (this can be fixed).

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here