Create a Masked Input Control

Create a Masked Input Control (cont.)

Dealing with Cut, Copy, Paste, and Undo
It's very important not to interfere with the cut, copy, paste, and undo functions. First check to see if the code interferes with any of these functions. Using Example 5, you can see that cut, copy, paste, and undo all work appropriately in NS4, but IE shows illegal character alerts for all four functions even though the behavior isn't cancelled (the text does appear when pasting despite the alert). Normally, detecting these keystrokes would require two steps: checking for the characters C, X, V, or Z as well as checking to see if the Ctrl key is pressed, but IE conveniently produces a different keycode for Ctrl + character than for the character alone so you can check for specific keycodes for the Copy, Cut, Paste, and Undo actions:

Command Keystroke Keycode

Copy Ctrl + C 3 (hex 03)

Cut Ctrl + X 22 (hex 16)

Paste Ctrl + V 24 (hex 18)

Undo Ctrl + Z 26 (hex 1A)

Because you know the keycodes, you can add them to the growing regular expression:

   var reKeyboardChars = 
      /[\x00\x03\x08\x0D\x16\x18\x1A]/;

Also, because these are non-character ASCII codes, adding them into this regular expression doesn't affect NS4 or NS6. Example 6a uses this updated regular expression to suppress the invalid character warnings in IE. That solves the problem in IE, but NS6 has even more issues than IE. Ctrl + C, Ctrl + X, Ctrl + V, and Ctrl + Z all fire the illegal character warning here as well. The bad news is that regardless of whether you type Ctrl + C or just hit the C key, NS6 returns the exact same keycode. Therefore, to appropriately check for these conditions, you must test the status of the Ctrl key and couple that with the standard character keycodes for C, X, V, and Z:

Command	Keystroke	Keycode
Copy	Ctrl + C	99 (hex 63, character 'c')
Cut	Ctrl + X	120 (hex 78, character 'x')
Paste	Ctrl + V	118 (hex 76, character 'v')
Undo	Ctrl + Z	122 (hex 7A, character 'z')

Because this is an NS6-specific issue, you can create a new regular expression used only for that browser. Since these commands return an actual character, you can test for the characters and don't need to bother with the ASCII codes:

   var reClipboardChars = /[cvxz]/i;

The i at the end of the regular expression specifies a case-insensitive match.. Checking the ASCII character is one step in this process, the other is determining whether the Ctrl key is pressed. In NS6, you can test the event object's ctrlKey property, which returns true when the Ctrl key is down. Here's a function that performs both steps:

   function checkClipboardCode(objEvent, strKey) {
     if (isNS6)
       return objEvent.ctrlKey &&  
         reClipboardChars.test(strKey);
     else
       return false;
   }

Function checkClipboardCode() takes two arguments: the event objects and the string that was returned from the keycode. The function returns true when the user initiates one of the clipboard commands. Because you only want to do this for NS6, the function automatically returns a value of false for other browsers.

Now add a call to this function in the maskKeyPress() function as part of the invalid character check:

   function maskKeyPress(objEvent) {             
      var iKeyCode, strKey;
   
      if (isIE) {
        iKeyCode = objEvent.keyCode;
      } 
      else {
        iKeyCode = objEvent.which; 
      }
      strKey = String.fromCharCode(iKeyCode);  
   
      if (!reValidChars.test(strKey) && 
         !reKeyboardChars.test(strKey) && 
         !checkClipboardCode(objEvent, strKey)) {
         alert("Invalid Character Detected!\nKeyCode = " 
         + iKeyCode + "\nCharacter =" + strKey);
       return false;
     }
   }

Example 6b uses the new function to fix the NS6 problem. You're almost done. At this point, you've blocked all invalid keystrokes, allowed Backspace, Enter, Home, End, Delete, the arrow keys, and all the clipboard functions. What could possibly be left? There's one more.

Dealing with Special Keys

Don't Forget Paste Validation

Introduction	Exploring Textbox Behavior	Blocking Keystrokes
Dealing with Special Keys	Dealing with Cut, Copy, Paste, and Undo	Don't Forget Paste Validation
Polishing the Mask

TALK BACK

Creating a masked edit text box in DTHML is not as straightforward as it seems at first. Do you know of other masked edit examples? Join the discussions at web.dhtml.scripting to get answers, make comments, or help others with their problems.