Click here to Skip to main content
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
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

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMember 387671112-Oct-11 6:11 
GeneralHelp with Jquery Pinmembersmarika11-Jan-10 17:53 
GeneralA small problem. Pinmemberwer@_op0324-Sep-08 23:23 
GeneralRe: A small problem. Pinmemberwer@_op0324-Sep-08 23:39 
Generalrequired field validator Pinmemberrsgrady12-Oct-07 21:54 
GeneralRe: required field validator PinmemberwebProgrammer16-Oct-07 18:26 
GeneralRe: required field validator Pinmemberrsgrady19-Oct-07 22:22 
GeneralRe: required field validator PinmemberwebProgrammer21-Oct-07 12:28 
QuestionEditing? PinmemberUmer Khan19-Jul-07 1:32 
AnswerRe: Editing? PinmemberChris_CP7-Aug-07 14:34 
GeneralRe: Editing? Pinmemberrahulrathore198623-Aug-12 21:30 
GeneralRe: Editing? Pinmembercodeproject4ysk25-Apr-14 9:41 
QuestionMore Than one Delimare Pinmemberyaseencarter18-Jul-07 3:32 
Question(232) 232-2323 how to do thta PinmemberUmer Khan18-Jul-07 0:54 
GeneralThanks! Pinmembersweettomandjerry4-Apr-07 16:45 
GeneralGreat tool! Pinmembergogetsome28-Jul-06 5:49 
GeneralJumps to beginning of field Pinmemberdaddion19-Sep-05 7:46 
GeneralRe: Jumps to beginning of field Pinmemberdaddion19-Sep-05 7:54 
GeneralRe: Jumps to beginning of field Pinmemberdaddion19-Sep-05 8:37 
Generalfirefox PinsussAnonymous12-Nov-04 18:52 
GeneralNetscape PinsussAnonymous20-Jan-04 11:49 
GeneralRe: Netscape PinmemberwebProgrammer20-Jan-04 12:29 
GeneralRe: Netscape PinsussAnonymous21-Jan-04 4:52 
GeneralRe: Netscape PinmemberwebProgrammer21-Jan-04 8:43 
GeneralAnother bug Pinmemberbm_ross15-Sep-03 18:30 

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
Web03 | 2.8.1411028.1 | Last Updated 20 Aug 2003
Article Copyright 2003 by webProgrammer
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid