<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web IM</title>
<script type="text/javascript">
//<![CDATA[
var _$ = function(n, w) {
return typeof n == "string" ? (w || window).document.getElementById(n) : n;
}; var _attachEvent = function(n, e, w) {
if(document.addEventListener) {
for(var i in e) {
_$(n, w).addEventListener(i, e[i], false);
}
} else if(document.attachEvent) {
for(var i in e) {
_$(n, w).attachEvent("on" + i, e[i]);
}
}
}; var _cancelDefault = function(e) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
};
window.onload = function() {
var stamp = window.frames[0].document.createElement("br"); window.frames[0].document.body.appendChild(stamp);
window.frames[0].document.designMode = "on"; _attachEvent(window.frames[0].document, {
"keypress" : function(event) {
event = event || window.frames[0].event; if(event.keyCode == 13) {
_cancelDefault(event); if(window.frames[0].getSelection) {
var selection = window.frames[0].getSelection();
var range = window.frames[0].document.createRange();
var enter = window.frames[0].document.createElement("br"); range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
range.insertNode(enter);
enter.parentNode.appendChild(stamp); //非常重要
range.selectNode(enter.nextSibling); selection.removeAllRanges();
selection.addRange(range);
selection.collapseToStart();
} else {
var range = window.frames[0].document.selection.createRange();
range.pasteHTML("<br />");
range.select();
} }
}
}, window.frames[0]); setInterval(function() {
_$("textarea").value = window.frames[0].document.body.innerHTML;
}, 100);
};
//]]>
</script>
</head><body>
<iframe src="about:blank" style="width:400px; height:300px;"></iframe>
<textarea id="textarea" style="width:400px; height:300px;"></textarea>
</body>
</html>
经过测试完全兼容一下浏览器:
Internet Explorer 6
Internet Explorer 8
Firefox
Safari
Opera
Chrome
360安全浏览器代码分析:
1) event.keyCode 不要说它在 Firefox 中不能用,Firefox 3.0 之后就支持的这个属性,说不支持的请自己测试。2)iframe 的 onkeypress 事件要在 designMode 属性设置之后用 2级 DOM 的方法绑定,否则不能达到预期的效果。3)虽然 onkeypress 事件函数返回 return false 可以在 IE 中屏蔽键盘输入,但是在非 IE 核心的浏览器中它是完全没有效果的,所以应该用 2级 DOM 提供的方法替代。4) W3C DOM 的 selection 在使用 range 对象插入节点后,如果在插入点位置之后没有一个非文本节点,那么可能会导致光标位置存在问题。但是如果每次都创建一个新的非文本节点,在某些浏览器中又会造成节点冗余,说以使用了 appendChild(enter.parentNode.appendChild(stamp))。
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货