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.
<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.
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.
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).
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
. Also, the fix that you used to capture the backspace event may not work with Netscape. (e.which) may need to be used in this case. I'll have to sniff the browser then incorporate this event handler. Please let me know if you encounter the same problem as it may be native to my machine. Thanks. 