JavaScript implements a Mask text box in ASP

In the Web page, the date, time, IP address and other needs of a certain format restrictions, otherwise it will be difficult to process and program communication.
Recently in doing a program just need to use this aspect, found the corresponding program on the Internet, but it is very bad to use, so had to realize one.

You first implement two functions to manipulate the cursor:

Gets the current cursor position of a text box control
function GetPos (obj)
{
Obj.focus ();
var workrange=document.selection.createrange ();
Obj.select ();
var allrange=document.selection.createrange ();
Workrange.setendpoint ("Starttostart", Allrange);
var len=workrange.text.length;
Workrange.collapse (FALSE);
Workrange.select ();
return Len;
}

Sets the current cursor position of a text box control
function SetCursor (obj,num) {
Range=obj.createtextrange ();
Range.collapse (TRUE);
Range.movestart (' character ', num);
Range.Select ();
}

The main idea of the main function is to do something when the keyboard is pressed, which I designed in the onkeydown event.

In onkeydown, first disable the system default keyboard processing

Seal the traditional treatment
Window.event.returnValue = false;

It then handles the corresponding keyboard messages that need to be processed.
Here casually handle a few necessary on it, because the text box itself does not need too much user action, so the cursor move forward, move back, delete operations to deal with, so that your text box has a basic operation, now operation has been very handy.

Self-processing button
Switch (Nkeycode)
{
Case 8://If action is backspace [<-]
{
StrText = Strtext.substr (0,ncursorpos-1) + strtext.substr (Ncursorpos, Ntextlen-ncursorpos);
ncursorpos--;
Break
}
Case 46://If the action is Del[del]
{
StrText = Strtext.substr (0,ncursorpos) + strtext.substr (ncursorpos+1,ntextlen-ncursorpos-1);
ncursorpos--;
Break
}
Case 38://If the action is a direction key [top]
Case 39://If the action is a direction key [right]
{
ncursorpos++;
Break
}

Case 37://If the action is a direction key [left]
Case 40://If action is direction key [next]
{
ncursorpos--;
Break
}
Default:
{
StrText = Strtext.substr (0,ncursorpos) + String.fromCharCode (nkeycode) + strtext.substr (Ncursorpos,ntextlen);
ncursorpos++;
if (ncursorpos>strtext.length)
{
Ncursorpos=strtext.length;
}
Break
}

}

Any other message is added with a character, visible, and the invisible character is added and the cursor is left behind. See above for the default processing part.

Then determine if the mask is correct, and if it is correct, then the input is valid and the value display is added to the text box.

if (Strtext.match (Expmask))
{
The input format is correct
Objtextbox.value = StrText;
}
Finally, move the cursor to the appropriate location.
　　

Move cursor
SetCursor (Objtextbox,ncursorpos);
Complete!

The main thing is to replace the system's keyboard messages into their own processing, shielding the system, so that you can get the most control.
This completes a textbox that restricts the formatting of the specified regular expression.

Complete code:

Controls the obj representation based on the specified positive expression
function Mask (objtextbox,mask)
{
Masks
Expmask = new RegExp (mask);
Text in the current text box
var strText =objtextbox.value;
Text length
var ntextlen=strtext.length;

Current cursor Position
var ncursorpos=getpos (Objtextbox);

Press the key code
var nkeycode = Window.event.keyCode;
if (Nkeycode >) Nkeycode-= (95-47);

Seal the traditional treatment
Window.event.returnValue = false;

Self-processing button
Switch (Nkeycode)
{
Case 8://If action is backspace [<-]
{
StrText = Strtext.substr (0,ncursorpos-1) + strtext.substr (Ncursorpos, Ntextlen-ncursorpos);
ncursorpos--;
Break
}
Case 46://If the action is Del[del]
{
StrText = Strtext.substr (0,ncursorpos) + strtext.substr (ncursorpos+1,ntextlen-ncursorpos-1);
ncursorpos--;
Break
}
Case 38://If the action is a direction key [top]
Case 39://If the action is a direction key [right]
{
ncursorpos++;
Break
}
Case 37://If the action is a direction key [left]
Case 40://If action is direction key [next]
{
ncursorpos--;
Break
}
Default:
{
StrText = Strtext.substr (0,ncursorpos) + String.fromCharCode (nkeycode) + strtext.substr (Ncursorpos,ntextlen);
ncursorpos++;
if (ncursorpos>strtext.length)
{
Ncursorpos=strtext.length;
}
Break
}

}

if (Strtext.match (Expmask))
{
The input format is correct
Objtextbox.value = StrText;
}

Move cursor
SetCursor (Objtextbox,ncursorpos);
}

Gets the current cursor position of a text box control
function GetPos (obj)
{
Obj.focus ();
var workrange=document.selection.createrange ();
Obj.select ();
var allrange=document.selection.createrange ();
Workrange.setendpoint ("Starttostart", Allrange);
var len=workrange.text.length;
Workrange.collapse (FALSE);
Workrange.select ();
return Len;
}

Sets the current cursor position of a text box control
function SetCursor (obj,num) {
Range=obj.createtextrange ();
Range.collapse (TRUE);
Range.movestart (' character ', num);

Range.Select ();
}

How to use:

1. Set the default, indefinite format initial value. For example: Date time format initial value is "//::", indicating (year/month/day: minutes: seconds). IP is "..." (192.168.0.1). is to set a character that does not violate the regular expression.

2. Call the Mask function in the onkeydown event of the text box in the form, and the argument Objtextbox is the name of the specified text box. The parameter mask is the mask of the regular expression format.

Example:

To use a date-time mask box

<input name= "I_etmend" type= "text" id= "I_etmend" value= "{i_etmend}" maxlength= ">

To use an IP mask box

<input name= "I_bip" type= "text" id= "I_bip" value= "{I_bip}" maxlength= ">