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 |