title: <br> inserted in contenteditable span fails to move cursor
body: <p>I want all text and breaks to be in spans, which the following code does.  Works perfectly in IE11 and chrome but has a serious issue in FF.  To wit, if the first key entered is &lt; enter >, the cursor fails to move to after the inserted &lt; br >.  The caret position seems to move as the next key entered is on the next line but the flashing cursor doesn't.  Furthermore, if backspaced to remove the character, the cursor goes back up to the first line.</p>
  
  <p>Easiest way to demonstrate :<a href="http://jsfiddle.net/jd2d7n3L/20/" rel="noreferrer">http://jsfiddle.net/jd2d7n3L/20/</a></p>
  
  <ol>
  <li>Make the first character entered &lt; enter ></li>
  <li>Expected result (which is what happens in chrome and IE10+) is for the flashing cursor to move down one line.</li>
  <li>Enter 'a' and then backspace. Expected result is flashing cursor is leftmost on 2nd line</li>
  </ol>
  
  <p>I have read many similar questions and answers relating to this on SO but none specifically deal with this situation.  How can I make FF behave?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id=bE contenteditable="true"&gt;&lt;br&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>bE.addEventListener("keypress",KP);
  bE.addEventListener("keypress",KU);
  
  function getContainer()
    {
    var eC=window.getSelection().getRangeAt(0).endContainer;
    while(eC&amp;&amp;eC.nodeType==3)eC=eC.parentNode;
    return eC
    }
  
  function insertElement(E)
    {
    var sel=window.getSelection(),range=sel.getRangeAt(0);
    range.deleteContents(); 
    range.collapse(true);
    range.insertNode(E);
    range.setStartAfter(E);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);     
    }
  
  function KP(e)
    {
    var kc=e.which||e.keyCode;
    if(e.charCode||e.which===13)
      {
      var sel=window.getSelection(),range=sel.getRangeAt(0);
      var eC=getContainer();
      if(eC===bE)
        {
        eC=document.createElement("span");
        range.insertNode(eC);
        range.selectNodeContents(eC);
        sel.removeAllRanges();
        sel.addRange(range);
        }
      if(kc===13)insertElement(document.createElement("br"));
      else       insertElement(document.createTextNode(String.fromCharCode(kc)));
  
      e.preventDefault();
      }
    }
  
  function KU(e) //ensures last element is br
    {
    if(!bE.lastChild||bE.lastChild.nodeName.toLowerCase()!=="br")bE.appendChild(document.createElement("br"))
    }
  </code></pre>