title: Traversing contenteditable paragraphs with arrow keys
body: <p>I'm try to traverse between contenteditable paragraphs using the arrow keys. I can't put a containing div around all paragraphs as the may be divided by other non-editable elements.</p>
  
  <p>I need to be able to determine the character length of the first line so that when the  up arrow key is pressed when the cursor is on the line then it will jump up to the previous paragraph - hopefully keeping the cursor position relative to the line.</p>
  
  <p>I can get the cursor index with:</p>
  
  <pre><code>function cursorIndex() {
      return window.getSelection().getRangeAt(0).startOffset;
  }
  </code></pre>
  
  <p>and set it with: as found here - <a href="https://stackoverflow.com/questions/16095155/javascript-contenteditable-set-cursor-caret-to-index">Javascript Contenteditable - set Cursor / Caret to index</a></p>
  
  <pre><code>var setSelectionRange = function(element, start, end) {
      var rng = document.createRange(),
          sel = getSelection(),
          n, o = 0,
          tw = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
      while (n = tw.nextNode()) {
          o += n.nodeValue.length;
          if (o &gt; start) {
              rng.setStart(n, n.nodeValue.length + start - o);
              start = Infinity;
          }
          if (o &gt;= end) {
              rng.setEnd(n, n.nodeValue.length + end - o);
              break;
          }
      }
      sel.removeAllRanges();
      sel.addRange(rng);
  };
  
  var setCaret = function(element, index) {
      setSelectionRange(element, index, index);
  };
  </code></pre>
  
  <p>Say the cursor is at the top row of the third paragraph and the up arrow is pressed, I would like it to jump to the bottom row of the second paragraph</p>
  
  <p><a href="http://jsfiddle.net/Pd52U/2/" rel="nofollow noreferrer">http://jsfiddle.net/Pd52U/2/</a></p>