Click here to Skip to main content
12,746,945 members (30,203 online)
Click here to Skip to main content
Add your own
alternative version


40 bookmarked
Posted 11 Aug 2003

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

, 19 Aug 2003
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.


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','-');"




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.


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


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


About the Author

Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

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

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

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

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