title: Navigating a list with keystrokes
body: <p>I am creating a list of items that I want the user to be able to interact with using the keyboard.  So something like this...</p>
  
  <pre><code>&lt;ul contenteditable="true"&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My understanding is in order to capture keydown/keyup events, I have to set the contenteditable attribute.  This works, but now the contents of the li's are editable which I don't want.  I simply need to capture keydown/keyup events.</p>
  
  <p>How can I capture these events without making the content editable?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Thanks to jumpingcode, the following works to keep it read-only...</p>
  
  <pre><code>$('ul').on('click', 'li', function (e) {
      e.preventDefault();
  });
  </code></pre>
  
  <p>... but I am still left with a blinking cursor on the li.  How do I get rid of that?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Started bounty, need the following updates to the preventDefault answer below.</p>
  
  <ol>
  <li>How to get rid of blinking cursor?</li>
  <li>How to make non-selectable?  I really only want to capture keydown events!  If I can accomplish that without setting contenteditable that would be preferable.</li>
  <li>I can capture keydown at the document level, but then the question becomes where did the keydown eminate from?  There could be several plugins in play, all needing to respond to the same event, but only when they are the active scope.</li>
  </ol>