10

ユーザーが入力したテキストエリア/入力の最初の文字を自動大文字化しようとしています。最初の試行は次のようになりました。

$(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/ )。キーアップではなくキーダウンで JavaScript を実行し、実行中のイベントを変換します (またはインターセプトし、デフォルトを防止し、変更された新しいイベントをトリガーします)。

これが私が今持っているものですが、動作しません( 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);
    }
  });
});

これが機能しない理由がわかりません - ここで何が欠けていますか?

4

9 に答える 9

27

この場合、CSS を使用する方がはるかに簡単です。

input{
    text-transform: capitalize;
}

更新:これは、すべての単語の最初の文字を大文字にしたくない場合に機能しますが、最初の単語の最初の文字のみを大文字にします:

input::first-letter{
    text-transform: uppercase;
}
于 2013-11-08T20:12:39.000 に答える
13

これは、Chromeで必要なことを行う私が作成したフィドルです。他のブラウザで動作するかどうかはわかりません。

コード：

$(document).ready(function() {
    $('input').on('keydown', function(event) {
        if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
           var $t = $(this);
           event.preventDefault();
           var char = String.fromCharCode(event.keyCode);
           $t.val(char + $t.val().slice(this.selectionEnd));
           this.setSelectionRange(1,1);
        }
    });
});
于 2013-11-08T20:23:41.867 に答える
2

これを試して：

$(document).ready(function() {
    $('input').on('keydown', function(e) {
        if (this.value == '') {
        var char = String.fromCharCode(e.which);
            if (char.match(/^\w$/)) {
                // If is empty and we pressed a printable key...
                this.value = char.toUpperCase();
                return false;
            }
        }
    });
});

ここで使用中を参照してください。

于 2013-11-08T21:02:33.787 に答える
0

jQuery 関数を使用できます。

$.fn.CapitalizeFirst = function () {
    return this.each(function () {
        $(this).on('keydown', function (event) {
            if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
                var $t = $(this);
                event.preventDefault();
                var char = String.fromCharCode(event.keyCode);
                $t.val(char + $t.val().slice(this.selectionEnd));
                this.setSelectionRange(1, 1);
            }
        });
    });
};
于 2014-12-16T07:36:40.827 に答える
-1

これは前のスレッドで議論されました。 JavaScript で文字列の最初の文字を大文字にするにはどうすればよいですか?

最初の単語が入力された後、または実際に必要なときにいつでもユーザー入力を取得し、上記のリンクで説明されている方法を使用して値をリセットできます。

于 2013-11-08T20:13:43.540 に答える
-1 
$('selector').blur(function(){
        $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().slice(1)); 
  });
于 2015-03-17T17:14:44.060 に答える