<!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))。