| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | |
| 3 <html> | |
| 4 <head> | |
| 5 <script type="text/javascript"> | |
| 6 function setKeypressHandler (el, keyHandler) { | |
| 7 if (el.addEventListener) { | |
| 8 el.addEventListener('keypress', keyHandler, false); | |
| 9 el.addEventListener('keydown', keyHandler, false); | |
| 10 el.addEventListener('keyup', keyHandler, false); | |
| 11 } else { | |
| 12 el.attachEvent('onkeypress', keyHandler); | |
| 13 el.attachEvent('onkeydown', keyHandler); | |
| 14 el.attachEvent('onkeyup', keyHandler); | |
| 15 } | |
| 16 } | |
| 17 | |
| 18 function output (text) { | |
| 19 var div = document.getElementById('debugOutput'); | |
| 20 div.appendChild(document.createTextNode(text)); | |
| 21 div.appendChild(document.createElement('br')); | |
| 22 } | |
| 23 | |
| 24 window.onload = function () { | |
| 25 // Super dumb browser detection | |
| 26 var isIE = window.navigator.userAgent.search('MSIE') != -1; | |
| 27 | |
| 28 var editFrame = document.getElementById('editFrame').contentWindow; | |
| 29 setKeypressHandler(editFrame.document, printEventData); | |
| 30 if (isIE) { | |
| 31 editFrame.document.body.contentEditable = true; | |
| 32 } else { | |
| 33 editFrame.document.designMode = 'On'; | |
| 34 // Attach a name to the containing HTML element | |
| 35 editFrame.document.getElementsByTagName("html")[0].id = "frameHtml"; | |
| 36 } | |
| 37 | |
| 38 var editDiv = document.getElementById('editDiv'); | |
| 39 setKeypressHandler(editDiv, printEventData); | |
| 40 editDiv.contentEditable = true; | |
| 41 | |
| 42 editFrame.document.body.style.margin = 1; | |
| 43 editFrame.document.body.style.padding = 0; | |
| 44 editFrame.document.body.id = 'theBody'; | |
| 45 | |
| 46 editDiv.style.margin = 1; | |
| 47 editDiv.style.padding = 0; | |
| 48 | |
| 49 window.setTimeout(function() { | |
| 50 var pre = document.createElement('pre'); | |
| 51 function write(text) { | |
| 52 pre.appendChild(document.createTextNode(text)); | |
| 53 pre.appendChild(document.createElement('br')); | |
| 54 } | |
| 55 | |
| 56 write('frame.contentWindow.document.designMode: ' + | |
| 57 editFrame.document.designMode); | |
| 58 write('frame.contentWindow.document.body.contentEditable: ' + | |
| 59 editFrame.document.body.contentEditable); | |
| 60 document.getElementById('editFrameInfo').appendChild(pre); | |
| 61 | |
| 62 pre = document.createElement('pre'); | |
| 63 write('div.ownerDocument.designMode: ' + | |
| 64 editDiv.ownerDocument.designMode); | |
| 65 write('div.ownerDocument.body.contentEditable: ' + | |
| 66 editDiv.ownerDocument.body.contentEditable); | |
| 67 write('div.contentEditable: ' + | |
| 68 editDiv.contentEditable); | |
| 69 document.getElementById('editDivInfo').appendChild(pre); | |
| 70 }, 0); | |
| 71 }; | |
| 72 | |
| 73 function isDef(obj, prop) { | |
| 74 return typeof obj[prop] != 'undefined'; | |
| 75 } | |
| 76 | |
| 77 function printEventData(e) { | |
| 78 e = e || window.event; | |
| 79 | |
| 80 function write(id, text, opt_color) { | |
| 81 var el = document.getElementById(id); | |
| 82 el.innerHTML = '[' + text + ']'; | |
| 83 el.style.backgroundColor = opt_color || 'white'; | |
| 84 } | |
| 85 write('type', e.type); | |
| 86 write('tagName', isDef(e, 'target') ? e.target.tagName : e.srcElement.tagName)
; | |
| 87 write('tagId', isDef(e, 'target') ? e.target.id : e.srcElement.id); | |
| 88 write('keyidentifier', isDef(e, 'keyIdentifier') ? e.keyIdentifier : 'n/a'); | |
| 89 write('keylocation', isDef(e, 'keyLocation') ? e.keyLocation : 'n/a'); | |
| 90 write('keycode', e.keyCode); | |
| 91 write('charcode', e.charCode); | |
| 92 write('which', e.which); | |
| 93 if (isDef(e, 'isTrusted')) { | |
| 94 write('istrusted', e.isTrusted, e.isTrusted ? '#afa' : '#faa'); | |
| 95 } else { | |
| 96 write('istrusted', 'n/a'); | |
| 97 } | |
| 98 write('alt', e.altKey); | |
| 99 write('ctrl', e.ctrlKey); | |
| 100 write('shift', e.shiftKey); | |
| 101 write('meta', e.metaKey); | |
| 102 | |
| 103 var s = ""; | |
| 104 for (var i in e) { | |
| 105 s += i + ": " + e[i] + " "; | |
| 106 } | |
| 107 //alert(s); | |
| 108 } | |
| 109 </script> | |
| 110 </head> | |
| 111 <body> | |
| 112 <div> | |
| 113 <div id="butter" style="background-color: #ffa;"> | |
| 114 </div> | |
| 115 <table width="100%"> | |
| 116 <tr valign="top"> | |
| 117 <td width="50%"> | |
| 118 <div>IFRAME</div> | |
| 119 <iframe id="editFrame" name="editFrame" src="" height="200px" width="3
00px" frameborder="0" style="border: 1px solid black;"> | |
| 120 </iframe> | |
| 121 <div id="editFrameInfo"> | |
| 122 <pre>frame.contentWindow.document.designMode: on<br>frame.contentWindo
w.document.body.contentEditable: false<br></pre></div> | |
| 123 </td> | |
| 124 <td> | |
| 125 <div>DIV</div> | |
| 126 <div id="editDiv" style="border-top-width: 1px; border-right-width: 1p
x; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; bo
rder-right-style: solid; border-bottom-style: solid; border-left-style: solid; b
order-top-color: black; border-right-color: black; border-bottom-color: black; b
order-left-color: black; height: 200px; width: 300px; overflow-x: auto; overflow
-y: auto; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1
px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px
; " contenteditable="true"> | |
| 127 </div> | |
| 128 <div id="editDivInfo"> | |
| 129 <pre>div.ownerDocument.designMode: off<br>div.ownerDocument.body.conte
ntEditable: false<br>div.contentEditable: true<br></pre></div> | |
| 130 </td> | |
| 131 </tr> | |
| 132 </table> | |
| 133 </div> | |
| 134 | |
| 135 <HR> | |
| 136 <DIV style="margin: 0px;padding:0px;padding-left:10px;font-family:Courier;"> | |
| 137 <TABLE cellpadding="0" cellspacing="0" width="200px" style="font-size:9pt;"> | |
| 138 <TBODY> | |
| 139 <TR><TD width="110px">type:</TD><TD id="type" width="90px">[]</TD></TR> | |
| 140 <TR><TD>tagName:</TD><TD id="tagName">[]</TD></TR> | |
| 141 <TR><TD>id:</TD><TD id="tagId">[]</TD></TR> | |
| 142 <TR><TD>keyIdentifier:</TD><TD id="keyidentifier">[]</TD></TR> | |
| 143 <TR><TD>keyLocation:</TD><TD id="keylocation">[]</TD></TR> | |
| 144 <TR><TD>keyCode:</TD><TD id="keycode">[]</TD></TR> | |
| 145 <TR><TD>charCode:</TD><TD id="charcode">[]</TD></TR> | |
| 146 <TR><TD>which:</TD><TD id="which">[]</TD></TR> | |
| 147 <TR><TD>isTrusted:</TD><TD id="istrusted">[]</TD></TR> | |
| 148 <TR><TD colspan="2">---------------------</TD></TR> | |
| 149 <TR><TD colspan="2">Modifiers</TD></TR> | |
| 150 <TR><TD>alt:</TD><TD id="alt">[]</TD></TR> | |
| 151 <TR><TD>ctrl:</TD><TD id="ctrl">[]</TD></TR> | |
| 152 <TR><TD>shift:</TD><TD id="shift">[]</TD></TR> | |
| 153 <TR><TD>meta:</TD><TD id="meta">[]</TD></TR> | |
| 154 </TBODY> | |
| 155 </TABLE> | |
| 156 </DIV> | |
| 157 | |
| 158 | |
| 159 | |
| 160 </BODY></HTML> | |
| OLD | NEW |