JavaScript code for implementing mask text box effects on ASP pages

Recently, a program needs to be used in this aspect. I found the corresponding program on the Internet, but it is very evil to use it, so I had to implement it myself.
First, two functions are implemented to operate the cursor: Copy codeThe Code is as follows: // obtain 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;
}
// Set 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 function implementation is to perform some operations when the keyboard is pressed. I designed it in the onKeyDown event.
In onKeyDown, first remove the default keyboard processing.Copy codeThe Code is as follows: // block the traditional processing
Window. event. returnvalue = false;

Then process the keyboard messages to be processed.
Here, we can handle a few necessary operations. Because the text box itself does not require too many user operations, we need to move the cursor forward, backward, or delete the operation, in this way, you can perform basic operations on the text box.Copy codeThe Code is as follows: // the button for self-processing
Switch (nKeyCode)
{
Case 8: // if the action is out of the range [<-]
{
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 [Up]
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 the action is a direction key [lower]
{
NCursorPos --;
Break;
}
Default:
{
StrText = strText. substr (0, nCursorPos) + String. fromCharCode (nKeyCode) + strText. substr (nCursorPos, nTextLen );
NCursorPos ++;
If (nCursorPos> strText. length)
{
NCursorPos = strText. length;
}
Break;
}
}

When a character is added to any other message, invisible characters are added and the cursor is clicked back. See the default processing section above.
Then determine whether the mask is correct. If yes, the input is valid and the value is displayed in the text box.Copy codeThe Code is as follows: if (strText. match (expMask ))
{
// The input format is correct.
ObjTextBox. value = strText;
}
Finally, move the cursor to the appropriate position.
　　
// Move the cursor
SetCursor (objTextBox, nCursorPos );

Done!
It is mainly to replace the system's keyboard message with its own processing, shielding the system, so that you can get the maximum control.
In this way, a TEXTBOX that restricts the format of the specified regular expression is created.
　　 Copy codeThe Code is as follows: // control the OBJ representation based on the specified positive expression.
Function mask (objTextBox, mask)
{
// Mask
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> 95) nKeyCode-= (95-47 );
// Block traditional processing
Window. event. returnvalue = false;
// Self-processing button
Switch (nKeyCode)
{
Case 8: // if the action is out of the range [<-]
{
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 [Up]
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 the action is a direction key [lower]
{
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 the cursor
SetCursor (objTextBox, nCursorPos );
}
// Obtain 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;
}
// Set 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 ();
}

Usage:
1. Set the default and indefinite initial values. For example, the initial value of the date and time format is "//:", indicating (year/month/day hour: minute: second ). The IP address is "..." (192.168.0.1 ). In fact, you can set a character that does not violate the regular expression.
2. Call the mask function in the onKeyDown event of the TEXT box of the form. The parameter objTextBox is the name of the specified TEXT box. The mask parameter is a mask in the regular expression format.
Example:
Mask box for date and timeCopy codeThe Code is as follows: <input name = "I _etmend" type = "text" id = "I _etmend" value = "{I _ETMEND}" maxlength = "19" onkeydown = "mask (I _etmend, '^ ([0-9] {0, 4}) \-([0-9] {0, 2}) \-([0-9] {0, 2 }) ([0-9] {0, 2}) :( [0-9] {0, 2}) :( [0-9] {0, 2}) $ ') ">

To use the IP mask boxCopy codeThe Code is as follows: <input name = "I _bip" type = "text" id = "I _bip" value = "{I _BIP}" maxlength = "15" onkeydown = "mask (I _bip, '^ ([0-9] {0, 3} [\.] [0-9] {0, 3} [\.] [0-9] {0, 3} [\.] [0-9] {0, 3}) $ ') ">