Inputting date, time, IP address, etc. in a web page requires certain format restrictions, otherwise it will be difficult for the program to communicate with the program.
Recently, I was working on a program that needed to use this aspect. I found corresponding programs on the Internet, but they were very cumbersome to use, so I had to implement one myself.
First implement two functions to operate the cursor:
// Get 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 the main function implementation is to perform some operations when the keyboard is pressed, which I designed in the OnKeyDown event.
In OnKeyDown, first shield the system's default keyboard processing
// seal the traditional processing window.event.returnValue = false;
and then process the corresponding keyboard messages that need to be processed.
Just process a few necessary things here, because the text box itself does not require too many user operations, so move the cursor forward, move back, and delete the operations, so that your text box has basic functions. The operation is very smooth now.
// Handle button switch (nKeyCode) by yourself
{
case 8:// if the 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 the direction key [upper]
case 39:// If the action is the arrow key [right]
{
nCursorPos++;
break;
}
case 37:// If the action is the arrow key [left]
case 40:// If the action is the direction key [bottom]
{
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 will add a character. Visible and invisible characters will be added and the cursor will move back. See the default handling section above.
Then determine whether the mask is correct. If it is correct, then the input is legal 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 the cursor setCursor(objTextBox,nCursorPos);
Finish!
The main purpose is to replace the system's keyboard messages with your own processing and block the system's messages, so that you can gain maximum control.
In this way, a TEXTBOX that restricts the format of the specified regular expression is born.
Attached is the complete code:
// According to the specified regular expression, control the OBJ representation function mask(objTextBox,mask)
{
//Mask expMask = new RegExp(mask);
//The text in the current text box var strText =objTextBox.value;
// Text length var nTextLen=strText.length;
// Current cursor position var nCursorPos=getPos(objTextBox);
// Pressed key code var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Seal traditional processing window.event.returnValue = false;
// Handle button switch (nKeyCode) by yourself
{
case 8:// if the 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 the direction key [upper]
case 39:// If the action is the arrow key [right]
{
nCursorPos++;
break;
}
case 37:// If the action is the arrow key [left]
case 40:// If the action is the direction key [bottom]
{
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);
}
// Get 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, indefinite format initial value. For example: the initial value of the date and time format is "//::", which means (year/month/day hour:minute:second). The IP is "..." (192.168.0.1). In fact, just 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 parameter mask is a mask in regular expression format.
Example:
To use a datetime mask box
<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 box
<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})$')">