使用 JQuery 实时将用户输入的第一个字符大写

我正在尝试自动大写用户输入的文本区域/输入的第一个字符。第一次尝试如下所示：

$(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);
    }
 });
});

这样做的问题是它显示小写字符然后纠正它，这很难看（http://jsfiddle.net/9zPTA/2/ http://jsfiddle.net/9zPTA/2/）。我想在 keydown 而不是 keyup 上运行我的 javascript，并在飞行中转换事件（或拦截它，防止默认，并触发修改后的新事件）。

这是我现在所拥有的，但不起作用（http://jsfiddle.net/9zPTA/5/ http://jsfiddle.net/9zPTA/5/):

$(document).ready(function() {
  $('input').on('keydown', function(event) {
    if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey)) {
       event.preventDefault();
       var myEvent = jQuery.Event('keypress');
       myEvent.target = event.target;
       myEvent.shiftKey = true;
       myEvent.keyCode = event.keyCode;
       $(document).trigger(myEvent);
    }
  });
});

我不知道为什么这不起作用——我在这里错过了什么？

在这种情况下使用 CSS 会容易得多：

input{
    text-transform: capitalize;
}

Update：当您不想大写每个单词的第一个字母，而只想大写第一个单词的第一个字母时，这适用于：

input::first-letter{
    text-transform: uppercase;
}