title: best way to accept the enter key for jquery input focus/select/blur?
body: <p>The following jsfiddle ... <b> <a href="http://jsfiddle.net/mqVUU/" rel="nofollow">http://jsfiddle.net/mqVUU/</a> </b> ... is a simple input field UI tweak. The goals are:</p>
  
  <ul>
  <li>on focus, enlarge the input (via animate)</li>
  <li>on focus, select current input content</li>
  <li>when 'enter' is pressed in the input, blur the input</li>
  <li>on blur, shrink the input</li>
  </ul>
  
  <p>Here's the script so far ...</p>
  
  <pre><code>$('input').on({
      focus: function(){
          $(this).animate({'width':200}, 300, 'easeInOutBack');
          $(this).select();
      },
      keydown: function(e){
          if (e.keyCode == 13) {
              $(this).blur();
          }
      },
      blur: function(){
          $(this).animate({ 'width':100}, 300, 'easeInOutBack');
          $('#result').html( $(this).val() );
      }
  });
  </code></pre>
  
  <p>Can anyone help with these questions ...</p>
  
  <ol>
  <li>If I put it in the <code>animate()</code> callback, anything the user types while the animation is occurring gets overwritten, which is problematic. So what's the best way to get the <code>select()</code> working properly?</li>
  <li>Is the <code>keydown</code> parameter really the only way to accept <code>enter</code> as a trigger??</li>
  </ol>
  
  <p>Thanks for any pointers :)</p>