title: Caret position not keeping track?
body: <p>What I'm trying to do is put key codes in an array, to do some interesting stuff with later on. So, I capture the keystrokes, get the caret position and put the key code in the array (with some help from MooTools):</p>
  
  <pre><code>var keyArray = [];
  $('form').addEvent('keyup', function(event) {
      var pos = document.activeElement.getCaretPosition();
  
      keyArray[pos] = event.code;
  });
  </code></pre>
  
  <p>Generally speaking, this works great. However, I noticed some <code>undefined</code> values in my array when showing the complete array in my console. Exploring this further, I found out that when typing quickly, the caret position seems to lose track, or being quick/slow to respond. I've made a jsfiddle to demonstrate this: <a href="http://jsfiddle.net/HQVR8/1/" rel="nofollow">http://jsfiddle.net/HQVR8/1/</a></p>
  
  <p>If you type quickly in this example, you'll see a caret position sequence like </p>
  
  <pre><code>- 1 - 2 - 3 - 5 - 6 - 6.
  </code></pre>
  
  <p>But when typing slowly, it's </p>
  
  <pre><code>- 1 - 2 - 3 - 4 - 5 - 6. 
  </code></pre>
  
  <p>Of course, the trouble now when typing quickly is that I have a <code>undefined</code> value in my array and I overwrite one array item. So the result is different.</p>
  
  <p>My question is if I can somehow let the caret position keep track. I've tried using the 'native' <code>selectionStart</code> instead, but results are the same. I also tried capturing the caret position in a <code>keydown</code> event and putting it in an array in the <code>keyup</code> event. No difference. I'm wondering if using little pauses (ie. forcing the user to type slower) might solve it, but this feels like a hack and I would prefer a 'proper' solution. Hopefully, there is one.</p>