title: Capitalize first character of user input in real time with JQuery
body: <p>I am trying to auto-capitalize the first character of a textarea/input that the user inputs.  The first attempt looked like this:</p>
  
  <pre><code>$(document).ready(function() {
   $('input').on('keydown', function() {
      if (this.value[0] != this.value[0].toUpperCase()) {
          // store current positions in variables
          var start = this.selectionStart;
          var end = this.selectionEnd; 
          this.value = this.value[0].toUpperCase() + this.value.substring(1);
          // restore from variables...
          this.setSelectionRange(start, end);
      }
   });
  });
  </code></pre>
  
  <p>The problem with this is that it shows the lowercase character and then corrects it, which is ugly (<a href="http://jsfiddle.net/9zPTA/2/">http://jsfiddle.net/9zPTA/2/</a>).  I would like to run my javascript on keydown instead of keyup, and transform the event in flight (or intercept it, prevent default, and trigger a modified new event).</p>
  
  <p>Here's what I have now, which doesn't work (<a href="http://jsfiddle.net/9zPTA/5/">http://jsfiddle.net/9zPTA/5/</a>):</p>
  
  <pre><code>$(document).ready(function() {
    $('input').on('keydown', function(event) {
      if (this.selectionStart == 0 &amp;&amp; event.keyCode &gt;= 65 &amp;&amp; event.keyCode &lt;= 90 &amp;&amp; !(event.shiftKey)) {
         event.preventDefault();
         var myEvent = jQuery.Event('keypress');
         myEvent.target = event.target;
         myEvent.shiftKey = true;
         myEvent.keyCode = event.keyCode;
         $(document).trigger(myEvent);
      }
    });
  });
  </code></pre>
  
  <p>I'm not sure why this doesn't work - what am I missing here?</p>