title: Behaviour Of Enter Key In Contenteditable Div
body: <p>I'm trying to make a rich text editor and i have near to my success. I'm trying to change the behaviour of enter key in contenteditable div because when pressing enter firefox produced <code>&lt;br&gt;</code> thats ok but Chrome and IE produced a <code>&lt;p&gt;</code> and <code>&lt;div&gt;</code> here i'm trying to force all browser to produce <code>&lt;br&gt;</code> when press enter under <code>&lt;div contenteditable="true"&gt;&lt;/div&gt;</code>. Everything working fine in internet explorer but in all browsers would have to press enter two times for <code>new line</code> or <code>&lt;br&gt;</code>.</p>
  
  <p>Here is my code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Rich Text Editor&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function preview() {
      var textbox = document.getElementById('textBox');
      document.getElementById("view").innerHTML=textbox.innerHTML;
  }
  function enterKeyPressHandler(evt) {
      var sel, range, br, addedBr = false;
      evt = evt || window.event;
      var charCode = evt.which || evt.keyCode;
      if (charCode == 13) {
          if (typeof window.getSelection != "undefined") {
              sel = window.getSelection();
              if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  br = document.createElement("br");
                  range.insertNode(br);
                  range.setEndAfter(br);
                  range.setStartAfter(br);
                  sel.removeAllRanges();
                  sel.addRange(range);
                  addedBr = true;
              }
          } else if (typeof document.selection != "undefined") {
              sel = document.selection;
              if (sel.createRange) {
                  range = sel.createRange();
                  range.pasteHTML("&lt;br&gt;");
                  range.select();
                  addedBr = true;
              }
          }
          // If successful, prevent the browser's default handling of the keypress
          if (addedBr) {
              if (typeof evt.preventDefault != "undefined") {
                  evt.preventDefault();
              } else {
                  evt.returnValue = false;
              }
          }
      }
  }
  function onload(){
      var el = document.getElementById("textBox");
      if (typeof el.addEventListener != "undefined")
      {
          el.addEventListener("keypress", enterKeyPressHandler , false);
      }
      else if (typeof el.attachEvent != "undefined")
      {
          el.attachEvent("onkeypress", enterKeyPressHandler);
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="javascript:onload();"&gt;
  &lt;form name="myform" method="POST"&gt;
  &lt;div id="textBox" contenteditable="true" style="width:500px; height:150px; padding:20px; border:solid thin #000"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;div id="view" style="width:500px; height:150px; padding:20px; border:solid thin #000"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;button onClick="javascript:preview();"&gt;Preview&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html
  </code></pre>
  
  <p><strong>Demo</strong> <a href="http://jsfiddle.net/9kULw/5/" rel="nofollow">JSFiddle</a></p>