Click here to Skip to main content
11,702,396 members (70,307 online)
Click here to Skip to main content

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

, 19 Aug 2003 201.4K 3K 40
Rate this:
Please Sign up or sign in to vote.
A script that will mask an input field - can be used on multiple fields on the same form with diferent characters, at different points in the text box, all using the same 10 line function.

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).

License

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

Share

About the Author

webProgrammer
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionInput mask to allow only numeric along with entering a specified character at a certain point Pin
deepika1231232-Aug-15 20:56
memberdeepika1231232-Aug-15 20:56 
Questionthank you so much Pin
erfanmo3-Feb-15 3:14
membererfanmo3-Feb-15 3:14 
GeneralMy vote of 5 Pin
Member 387671112-Oct-11 5:11
memberMember 387671112-Oct-11 5:11 
GeneralHelp with Jquery Pin
smarika11-Jan-10 16:53
membersmarika11-Jan-10 16:53 
GeneralA small problem. Pin
wer@_op0324-Sep-08 22:23
memberwer@_op0324-Sep-08 22:23 
GeneralRe: A small problem. Pin
wer@_op0324-Sep-08 22:39
memberwer@_op0324-Sep-08 22:39 
Generalrequired field validator Pin
rsgrady12-Oct-07 20:54
memberrsgrady12-Oct-07 20:54 
GeneralRe: required field validator Pin
webProgrammer16-Oct-07 17:26
memberwebProgrammer16-Oct-07 17:26 
GeneralRe: required field validator Pin
rsgrady19-Oct-07 21:22
memberrsgrady19-Oct-07 21:22 
GeneralRe: required field validator Pin
webProgrammer21-Oct-07 11:28
memberwebProgrammer21-Oct-07 11:28 
QuestionEditing? Pin
Umer Khan19-Jul-07 0:32
memberUmer Khan19-Jul-07 0:32 
AnswerRe: Editing? Pin
Chris_CP7-Aug-07 13:34
memberChris_CP7-Aug-07 13:34 
GeneralRe: Editing? Pin
rahulrathore198623-Aug-12 20:30
memberrahulrathore198623-Aug-12 20:30 
GeneralRe: Editing? Pin
codeproject4ysk25-Apr-14 8:41
membercodeproject4ysk25-Apr-14 8:41 
QuestionMore Than one Delimare Pin
yaseencarter18-Jul-07 2:32
memberyaseencarter18-Jul-07 2:32 
Question(232) 232-2323 how to do thta Pin
Umer Khan17-Jul-07 23:54
memberUmer Khan17-Jul-07 23:54 
GeneralThanks! Pin
sweettomandjerry4-Apr-07 15:45
membersweettomandjerry4-Apr-07 15:45 
GeneralGreat tool! Pin
gogetsome28-Jul-06 4:49
membergogetsome28-Jul-06 4:49 
GeneralJumps to beginning of field Pin
daddion19-Sep-05 6:46
memberdaddion19-Sep-05 6:46 
GeneralRe: Jumps to beginning of field Pin
daddion19-Sep-05 6:54
memberdaddion19-Sep-05 6:54 
GeneralRe: Jumps to beginning of field Pin
daddion19-Sep-05 7:37
memberdaddion19-Sep-05 7:37 
Generalfirefox Pin
Anonymous12-Nov-04 17:52
sussAnonymous12-Nov-04 17:52 
GeneralNetscape Pin
Anonymous20-Jan-04 10:49
sussAnonymous20-Jan-04 10:49 
GeneralRe: Netscape Pin
webProgrammer20-Jan-04 11:29
memberwebProgrammer20-Jan-04 11:29 
GeneralRe: Netscape Pin
Anonymous21-Jan-04 3:52
sussAnonymous21-Jan-04 3:52 
GeneralRe: Netscape Pin
webProgrammer21-Jan-04 7:43
memberwebProgrammer21-Jan-04 7:43 
GeneralAnother bug Pin
bm_ross15-Sep-03 17:30
memberbm_ross15-Sep-03 17:30 
QuestionRe: Another bug Pin
Umer Khan28-Sep-07 1:44
memberUmer Khan28-Sep-07 1:44 
GeneralDeleting Field information Pin
Eric Bennion19-Aug-03 3:52
memberEric Bennion19-Aug-03 3:52 
GeneralRe: Deleting Field information Pin
Eric Bennion19-Aug-03 4:04
memberEric Bennion19-Aug-03 4:04 
GeneralRe: Deleting Field information Pin
webProgrammer20-Aug-03 8:17
memberwebProgrammer20-Aug-03 8:17 
GeneralRe: Deleting Field information Pin
Eric Bennion20-Aug-03 9:50
memberEric Bennion20-Aug-03 9:50 
Generalformatting !!!!! Pin
Anonymous12-Aug-03 20:50
sussAnonymous12-Aug-03 20:50 
GeneralRe: formatting !!!!! Pin
webProgrammer20-Aug-03 8:33
memberwebProgrammer20-Aug-03 8:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150819.1 | Last Updated 20 Aug 2003
Article Copyright 2003 by webProgrammer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid