title: JavaScript contenteditable
body: <p>I am creating a HTML rich text editor and I would like to use the contenteditable attribute on a div. I have a list of divs inside a div called editor. When the user hits enter I prevent the default action. I then insert a new div after the current div. The only problem is I cannot focus on the new div. Does anyone know how to do this?</p>
  
  <p>The HTML
  <code></p>
  
  <pre><code>&lt;body&gt;
          &lt;div id="editor" contenteditable="true"&gt;
              &lt;div id="1" contenteditable="ture" class="line" style="height: 20px; background-color: #a0f;"&gt;&lt;/div&gt;
              &lt;div contenteditable="ture" class="line" style="height: 20px; background-color: #abf;"&gt;&lt;/div&gt;
              &lt;div contenteditable="ture" class="line" style="height: 20px; background-color: #a9f;"&gt;&lt;/div&gt;
              &lt;div contenteditable="ture" class="line" style="height: 20px; background-color: #aff;"&gt;&lt;/div&gt;
              &lt;div contenteditable="ture" class="line" style="height: 20px; background-color: #aaf;"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></code></p>
  
  <p>The JavaScript
  <code></p>
  
  <pre><code> $(function(){
  
          var thisLine;
  
          $("#editor").bind("keydown", function(event){
              if(event.keyCode == 13){
                  event.preventDefault(); 
                  var newLine = $("&lt;div tabindex=\"-1\" contenteditable=\"ture\" id=\"2\"class=\"line\" style=\"height: 20px; background-color: #aff;\"&gt;&lt;/div&gt;");
                          newLine.insertAfter(thisLine);
                          $("#2").focus();
                      }
                  })
  
                  $(".line").bind("click", function(){
                      thisLine = $(this);
                  })
  
              });
  </code></pre>
  
  <p></code></p>