JavaScripTools Manual

InputMask

Introduction to InputMask

InputMask is a script that contains several masks - classes that format and restrict the user input on form fields. There are 4 types of masks:

• InputMask: General purpose mask. It can be used to restric which characters the user may type, as well as applying separator and size constraints
• NumberMask: A number specific mask. Uses a NumberParser to determine the mask format.
• DateMask: A date specific mask. Uses a DateParser to determine the mask format.
• SizeLimit: Used to restrict the number of characters that can be typed on a textarea field.

All masks follows these rules:

• The mask is applied using it's constructor. After the mask is instantiated, the control is already bound to the mask. The mask property control is the control reference, and the property mask is added to the control. See each mask for more details.
• Currently, masks works better on Internet Explorer and Gecko based browsers (Mozilla, Firefox, Seamonkey, ...). Other W3C compilant browsers (like Opera and Konqueror) are supported, but the input value is changed only on the blur event. This is because the lack of support for caret operations. As a consequence the input value cannot be modified "on the fly", so, only on blur, the mask will be applied. Characters, however, are successfully filtered.
• Starting at version 2.1, the masks allows event handlers for keydown, keyup, keypress and blur to be set on the INPUT tag, but you can, like before, set these properties:
  • keyPressFunction: Called on the onkeypress event
  • keyUpFunction: Called on the onkeyup event
  • keyDownFunction: Called on the onkeydown event
  • blurFunction: Called on the onblur event
  • changeFunction: Called on the onchange event
  • updateFunction: Not a standard event, but called whenever the mask is applied
  Here is an example usage (using the with statement):

  with (new InputMask("AA/##", "myControl")) {
      keyUpFunction = function(event, mask) {
          setValue("output", "A key was pressed. My current value is " + mask.control.value)
      };
      updateFunction = function(mask) {
          setValue("output", "I have been updated. My current value is " + mask.control.value)
      };
  };
  

  Important: The standard event handlers (keyPressFunction, keyUpFunction, keyDownFunction and blurFunction) are evaluated by the control, so, inside the code, this refers to the control (this has been changed on version 2.1, so, the same event handler you would normally use on a control you can use with the mask). The updateFunction, that is mask specific, is evaluated by the mask, so, this refers to the mask.
  Important 2: Internet Explorer does not triggers onchange events when the masks are used, but the mask emulates it, calling the changeFunction even on Internet Explorer.
• One more thing, quite obvious, but many people don't realize that the code that creates the masks must run after the controls have been created. Normally, people put the script tag before the body tag. If you put the mask creation code directly there, at the moment it's evaluated, there are no form fields yet. So, you can create a function, for example, called setup, and place it's call on the body onload event. Another approach is to create a script tag directly on the body, after the input tags