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>