[Original] Use JavaScript to implement mask text boxes in the web page

xiaoxiao2021-03-06  65

Date, time, IP address, etc. in the web page require a certain format limit, otherwise the program will be difficult and programs. Recently, I have to use this aspect, I have found the corresponding program on the Internet, but it is very evil, so I have to achieve one. First implement two functions to operate the cursor: // Get a current cursor location of a text box control Function getPos (OBJ) {Obj.focus (); var Workrange = document.selection.createRAnge (); obj.select (); Obj.select (); Var allrange = document.selection.createrange (); Workrange.SetendPoint ("StartTostart", Allrange; var len = Workrange.Text.length; WorkRange.collapse (False); Workrange.Select ();

Return Len;}

/ / Set a text box control Current cursor location 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 some operations when the keyboard is pressed, and I design in the onkeyDown event. In onkeyDown, first put the system default keyboard processing shielded // seal traditional processing Window.Event.ReturnValue = false; then process the keyboard message that needs to be processed accordingly. It is possible here to handle a few need, because the text box does not need much user operation, so the front movement, post-shift, delete operation of the cursor, so your text box has basic Operation, it is now very easy to operate. // Self-processing button Switch (nkeycode) {case 8: // If the action is back [<-] {strursorpos-1) Strtext.Substr (ncursorpos, ntextlen-ncursorpos); NCursorpos -; Break; } Case 38: // If the action is the direction key [on] Case 39: // If the action is the direction key [right] {ncursorpos ; break;} case 37: // If the action is the direction key [left] case 40: / / If the action is the direction button [{ncursorpos -; break;} default: {strText = strTex t.substr (0, nCursorPos) String.fromCharCode (nKeyCode) strText.substr (nCursorPos, nTextLen); nCursorPos ; if (nCursorPos> strText.length) {nCursorPos = strText.length;} break;}

} Any other news is added to add a character, and the invisible characters will be added and the cursor will take a look. See the DEFAULT treatment part above. Then determine if the mask is correct. If it is correct, then the input is legally, and the value is displayed to the text box. IF (strText.match (expmask)) {// Input format correct objtextbox.value = strText;} Finally move the cursor to the appropriate location. // Move the cursor setCursor (ObjTextBox, ncursorpos); complete! It is mainly to replace the keyboard message of the system into its own processing, shield the system, so you can get the maximum control. This is the birth of TEXTBOX to format the specified regular expression. Complete code:

/ / According to the specified positive expression, control the OBJ indicate function mask (objtextbox, mask) {// mask eXpmask = new regexp (mask); // Text's text in the current text box = objTextBox.Value; // Text Length var ntextlen = start.length; // Current cursor position var ncursorpos = getpos (objtextbox); // Press the key code var nkeycode = window.event.keycode; if (nkeycode> 95) nkeycode - = (95-47) NKEYCODE ); // Seal the traditional processing of window.event.ReturnValue = false; // self-processing button Switch (nkeycode) {case 8: // If the action is back [<-] {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 button [on] case 39: // If the action is the direction key [right] {ncursorpos ;

Break;} case 37: // If the action is the direction button [left] case 40: // If the action is the direction button [下] {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)) { // Input format correct objtextbox.value = strText;} // Move cursor setCursor (ObjTextBox, ncursorpos);} // Get a current cursor location of a text box control Function getPos (Obj) {Obj.focus (); var Workrange = Document.selection.createrange (); obj.select (); var allrange = document.selection.createrange (); WorkRange.sendPoint ("starttostart", allrange; var len = Workrange.Text.length;

Workrange.collapse (false); Return Len;} // Setting a text box control Current cursor location function setcursor (obj, num) {Range = Obj.createTextRange (); Range.collapse (TRUE) Range.MoveStart ('Character', Num); Range.Select ();} How to use:

1. Set the default, uncertain format initial value. Such as: The initial value of the date time is "// ::", indicating (year / month / day: minutes: second). IP is "..." (192.168.0.1). In fact, setting a character that does not violate the regular expression.

2. Tune the Mask function in the onkeydown event of the text box of the form, and the parameter ObjTextBox is Name of the specified text box. The parameter MASK is a mask of the regular expression format.

example:

To use a date-time mask box

To use IP mask box

转载请注明原文地址:https://www.9cbs.com/read-89495.html


New Post(0)