161 lines
5.9 KiB
HTML
161 lines
5.9 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function setKeypressHandler (el, keyHandler) {
|
||
|
|
if (el.addEventListener) {
|
||
|
|
el.addEventListener('keypress', keyHandler, false);
|
||
|
|
el.addEventListener('keydown', keyHandler, false);
|
||
|
|
el.addEventListener('keyup', keyHandler, false);
|
||
|
|
} else {
|
||
|
|
el.attachEvent('onkeypress', keyHandler);
|
||
|
|
el.attachEvent('onkeydown', keyHandler);
|
||
|
|
el.attachEvent('onkeyup', keyHandler);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function output (text) {
|
||
|
|
var div = document.getElementById('debugOutput');
|
||
|
|
div.appendChild(document.createTextNode(text));
|
||
|
|
div.appendChild(document.createElement('br'));
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = function () {
|
||
|
|
// Super dumb browser detection
|
||
|
|
var isIE = window.navigator.userAgent.search('MSIE') != -1
|
||
|
|
|| window.navigator.userAgent.search('Trident') != -1;
|
||
|
|
|
||
|
|
var editFrame = document.getElementById('editFrame').contentWindow;
|
||
|
|
setKeypressHandler(editFrame.document, printEventData);
|
||
|
|
if (isIE) {
|
||
|
|
editFrame.document.body.contentEditable = true;
|
||
|
|
} else {
|
||
|
|
editFrame.document.designMode = 'On';
|
||
|
|
// Attach a name to the containing HTML element
|
||
|
|
editFrame.document.getElementsByTagName("html")[0].id = "frameHtml";
|
||
|
|
}
|
||
|
|
|
||
|
|
var editDiv = document.getElementById('editDiv');
|
||
|
|
setKeypressHandler(editDiv, printEventData);
|
||
|
|
editDiv.contentEditable = true;
|
||
|
|
|
||
|
|
editFrame.document.body.style.margin = 1;
|
||
|
|
editFrame.document.body.style.padding = 0;
|
||
|
|
editFrame.document.body.id = 'theBody';
|
||
|
|
|
||
|
|
editDiv.style.margin = 1;
|
||
|
|
editDiv.style.padding = 0;
|
||
|
|
|
||
|
|
window.setTimeout(function() {
|
||
|
|
var pre = document.createElement('pre');
|
||
|
|
function write(text) {
|
||
|
|
pre.appendChild(document.createTextNode(text));
|
||
|
|
pre.appendChild(document.createElement('br'));
|
||
|
|
}
|
||
|
|
|
||
|
|
write('frame.contentWindow.document.designMode: ' +
|
||
|
|
editFrame.document.designMode);
|
||
|
|
write('frame.contentWindow.document.body.contentEditable: ' +
|
||
|
|
editFrame.document.body.contentEditable);
|
||
|
|
document.getElementById('editFrameInfo').appendChild(pre);
|
||
|
|
|
||
|
|
pre = document.createElement('pre');
|
||
|
|
write('div.ownerDocument.designMode: ' +
|
||
|
|
editDiv.ownerDocument.designMode);
|
||
|
|
write('div.ownerDocument.body.contentEditable: ' +
|
||
|
|
editDiv.ownerDocument.body.contentEditable);
|
||
|
|
write('div.contentEditable: ' +
|
||
|
|
editDiv.contentEditable);
|
||
|
|
document.getElementById('editDivInfo').appendChild(pre);
|
||
|
|
}, 0);
|
||
|
|
};
|
||
|
|
|
||
|
|
function isDef(obj, prop) {
|
||
|
|
return typeof obj[prop] != 'undefined';
|
||
|
|
}
|
||
|
|
|
||
|
|
function printEventData(e) {
|
||
|
|
e = e || window.event;
|
||
|
|
|
||
|
|
function write(id, text, opt_color) {
|
||
|
|
var el = document.getElementById(id);
|
||
|
|
el.innerHTML = '[' + text + ']';
|
||
|
|
el.style.backgroundColor = opt_color || 'white';
|
||
|
|
}
|
||
|
|
write('type', e.type);
|
||
|
|
write('tagName', isDef(e, 'target') ? e.target.tagName : e.srcElement.tagName);
|
||
|
|
write('tagId', isDef(e, 'target') ? e.target.id : e.srcElement.id);
|
||
|
|
write('keyidentifier', isDef(e, 'keyIdentifier') ? e.keyIdentifier : 'n/a');
|
||
|
|
write('keylocation', isDef(e, 'keyLocation') ? e.keyLocation : 'n/a');
|
||
|
|
write('keycode', e.keyCode);
|
||
|
|
write('charcode', e.charCode);
|
||
|
|
write('which', e.which);
|
||
|
|
if (isDef(e, 'isTrusted')) {
|
||
|
|
write('istrusted', e.isTrusted, e.isTrusted ? '#afa' : '#faa');
|
||
|
|
} else {
|
||
|
|
write('istrusted', 'n/a');
|
||
|
|
}
|
||
|
|
write('alt', e.altKey);
|
||
|
|
write('ctrl', e.ctrlKey);
|
||
|
|
write('shift', e.shiftKey);
|
||
|
|
write('meta', e.metaKey);
|
||
|
|
|
||
|
|
var s = "";
|
||
|
|
for (var i in e) {
|
||
|
|
s += i + ": " + e[i] + " ";
|
||
|
|
}
|
||
|
|
//alert(s);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<div id="butter" style="background-color: #ffa;">
|
||
|
|
</div>
|
||
|
|
<table width="100%">
|
||
|
|
<tr valign="top">
|
||
|
|
<td width="50%">
|
||
|
|
<div>IFRAME</div>
|
||
|
|
<iframe id="editFrame" name="editFrame" src="" height="200px" width="300px" frameborder="0" style="border: 1px solid black;">
|
||
|
|
</iframe>
|
||
|
|
<div id="editFrameInfo">
|
||
|
|
<pre>frame.contentWindow.document.designMode: on<br>frame.contentWindow.document.body.contentEditable: false<br></pre></div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>DIV</div>
|
||
|
|
<div id="editDiv" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; height: 200px; width: 300px; overflow-x: auto; overflow-y: auto; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " contenteditable="true">
|
||
|
|
</div>
|
||
|
|
<div id="editDivInfo">
|
||
|
|
<pre>div.ownerDocument.designMode: off<br>div.ownerDocument.body.contentEditable: false<br>div.contentEditable: true<br></pre></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<HR>
|
||
|
|
<DIV style="margin: 0px;padding:0px;padding-left:10px;font-family:Courier;">
|
||
|
|
<TABLE cellpadding="0" cellspacing="0" width="200px" style="font-size:9pt;">
|
||
|
|
<TBODY>
|
||
|
|
<TR><TD width="110px">type:</TD><TD id="type" width="90px">[]</TD></TR>
|
||
|
|
<TR><TD>tagName:</TD><TD id="tagName">[]</TD></TR>
|
||
|
|
<TR><TD>id:</TD><TD id="tagId">[]</TD></TR>
|
||
|
|
<TR><TD>keyIdentifier:</TD><TD id="keyidentifier">[]</TD></TR>
|
||
|
|
<TR><TD>keyLocation:</TD><TD id="keylocation">[]</TD></TR>
|
||
|
|
<TR><TD>keyCode:</TD><TD id="keycode">[]</TD></TR>
|
||
|
|
<TR><TD>charCode:</TD><TD id="charcode">[]</TD></TR>
|
||
|
|
<TR><TD>which:</TD><TD id="which">[]</TD></TR>
|
||
|
|
<TR><TD>isTrusted:</TD><TD id="istrusted">[]</TD></TR>
|
||
|
|
<TR><TD colspan="2">---------------------</TD></TR>
|
||
|
|
<TR><TD colspan="2">Modifiers</TD></TR>
|
||
|
|
<TR><TD>alt:</TD><TD id="alt">[]</TD></TR>
|
||
|
|
<TR><TD>ctrl:</TD><TD id="ctrl">[]</TD></TR>
|
||
|
|
<TR><TD>shift:</TD><TD id="shift">[]</TD></TR>
|
||
|
|
<TR><TD>meta:</TD><TD id="meta">[]</TD></TR>
|
||
|
|
</TBODY>
|
||
|
|
</TABLE>
|
||
|
|
</DIV>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</BODY></HTML>
|