1 <?xml version="1.0" encoding="UTF-8"?>
  2 <page>
  3    <config>
  4 
  5    </config>
  6    
  7    <!--Enter page element configuration-->
  8    <make id="myInput" type="input" level="0" dims="10,10,200,36">
  9       <!--Style the input field-->
 10       <style>
 11          <![CDATA[
 12             { 'border'        : '1px solid rgb(156,156,156)',
 13               'borderRadius'  : '8px',
 14               'padding'       : '6px 5px',
 15               'font-family'   : 'Tahoma, Verdana',
 16               'font-size'     : '12pt',
 17               'background-color' : '#F5F5DC',
 18               'line-height'      : '1.3em' } 
 19          ]]>
 20       </style>
 21       
 22       <!--Create our own keydown handler-->
 23       <function name="myDwn" event="keydown" params="e">
 24          <![CDATA[
 25             //IE8 requirements
 26             if (!e) e = window.event;
 27             var obj = this || e.srcElement;
 28             if (!obj.id) return;
 29 
 30             //Clear pre-intialized field text onkeydown
 31             if (tbfunction_pgTBObjGet(obj.id, 'text') == '(enter phone)') {
 32                tbfunction_pgTBObjSet(obj.id, 'text', '');
 33             }
 34          ]]>
 35       </function>
 36       
 37       <!--Create our own keyup handler-->
 38       <function name="myKey" event="keyup" params="e">
 39          <![CDATA[
 40             //IE8 requirements
 41             if (!e) e = window.event;
 42             var obj = this || e.srcElement;
 43             if (!obj.id) return;
 44 
 45             obj.style.color = 'rgb(0,128,0)';
 46             
 47             /* Get which key was pressed ...
 48                chr = keypressed; code = ASCII numeric keycode */
 49             var chr = (e.key || e.which || e.keyCode).toString();
 50             var code = chr.length == 1 ? chr.charCodeAt(0) : e.keyCode;
 51             
 52             var maxChr = 14;
 53             tbfunction_validateField( 1, 1, '', '', '', '',
 54                                  maxChr, '(###) ###-####', '', obj.id, chr, code);
 55             
 56             //Send user event to change color or disable field when max reached.                      
 57             tbfunction_pgTBObjSet(obj.id, 'user', maxChr, 500, false, true);
 58          ]]>
 59       </function>
 60       
 61       <!--Create a user event function; can be sent locally or from ToolBook.-->
 62       <function name="myUser" event="user" params="e">
 63          <![CDATA[
 64             if (!!e.data['make']) {
 65                /* Since this object is the notifyObject when this XML loads,
 66                   we can pre-enter some text as an instruction to the user once the 
 67                   XML parser finishes building the object. */
 68                tbfunction_pgTBObjSet(this.id, 'text', '(enter phone)');
 69                tbfunction_pgStyleObject(this.id, 'color', 'rgb(176,176,176)');
 70                tbfunction_caretPosition(this.id, "home"); //Put the focus caret at home position in field
 71                
 72                //When first keydown occurs, the keydown function removes the boiler text
 73                
 74             } else if (pgIsNumber(e.data)) {
 75                /* Process user events here; e.data will be [value] passed in from ToolBook
 76                   In this case we are sending this user event from the keyup handler and
 77                      the [value] passed is the max characters allowed in the field.
 78                      When max characters is reached, the field is disabled to prevent 
 79                      further input. */
 80                if (e.data == this.value.length) {
 81                   this.style.color = 'red';
 82                   tbfunction_pgTBObjSet(this.id, 'enabled', false); //Disable the field
 83                } else this.style.color = 'rgb(0,128,0)';
 84             }
 85          ]]>
 86       </function>
 87    </make>
 88 </page>