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,
str - the value of the current textbox control,
textbox - the actual textbox object, (so that the value can be set)
loc - a string of multiple locations to place the specified character,
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).
