Whenever we need the textbox control for date, phone numbers with area code with seperated, in these cases the masked textbox will be helpful. It takes delimiter after specific word automatically.
Below is simple example to demonstrate the phone number with STD, Area code.
HTML form
<form name="form" action="" method="post">
<input name="Field1" value="" type="text"
onKeyPress="javascript:return maskInput(this.value,this,'3,7','-');"
onblur="javascript:return maskInput(this.value,this,'3,7','-');"
"
style="font-family:verdana;font-size:10pt;width:110px;"
maxlength="12">
</form>
The Function which we use for masking
//Masked the input phone number to display in "123-123-1234" format
function maskInput(input, textbox, location, delimiter) {
//Get the delimiter positons
var locs = location.split(',');
//Iterate until all the delimiters are placed in the textbox
for (var delimCount = 0; delimCount <= locs.length; delimCount++) {
for (var inputCharCount = 0; inputCharCount <= input.length; inputCharCount++) {
//Check for the actual position of the delimiter
if (inputCharCount == locs[delimCount]) {
//Confirm that the delimiter is not already present in that position
if (input.substring(inputCharCount, inputCharCount + 1) != delimiter) {
input = input.substring(0, inputCharCount) + delimiter + input.substring(inputCharCount, input.length);
}
}
}
}
textbox.value = input;
}
Below is simple example to demonstrate the phone number with STD, Area code.
HTML form
<form name="form" action="" method="post">
<input name="Field1" value="" type="text"
onKeyPress="javascript:return maskInput(this.value,this,'3,7','-');"
onblur="javascript:return maskInput(this.value,this,'3,7','-');"
"
style="font-family:verdana;font-size:10pt;width:110px;"
maxlength="12">
</form>
The Function which we use for masking
//Masked the input phone number to display in "123-123-1234" format
function maskInput(input, textbox, location, delimiter) {
//Get the delimiter positons
var locs = location.split(',');
//Iterate until all the delimiters are placed in the textbox
for (var delimCount = 0; delimCount <= locs.length; delimCount++) {
for (var inputCharCount = 0; inputCharCount <= input.length; inputCharCount++) {
//Check for the actual position of the delimiter
if (inputCharCount == locs[delimCount]) {
//Confirm that the delimiter is not already present in that position
if (input.substring(inputCharCount, inputCharCount + 1) != delimiter) {
input = input.substring(0, inputCharCount) + delimiter + input.substring(inputCharCount, input.length);
}
}
}
}
textbox.value = input;
}