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. I recently made a program that needed to use this aspect. I found the corresponding program on the Internet, but using They all sound very bad, so I had to implement one myself.
First implement two functions to operate the cursor:
Copy the code code as follows:
// 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
Copy the code code as follows:
// Seal traditional processing
window.event.returnvalue = false;
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.
Copy the code code as follows:
// Handle the button yourself
switch(nKeyCode)
{
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.
Copy the code code as follows:
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);
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.
Copy the code code as follows:
//Control OBJ representation based on the specified regular expression
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 keycode
var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Seal traditional processing
window.event.returnvalue = false;
// Handle the button yourself
switch(nKeyCode)
{
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 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();
}
How to use:
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
Copy the code code 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 IP mask box
Copy the code code 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})$')>