web-dev-qa-db-ja.com

テキストフィールドのすべてを大文字/大文字にする方法は？

テキストフィールドに書くすべてを大文字にしたい。私が書いているように、焦点を失った後ではありません。

JQueryを使用してこれを行うにはどうすればよいですか？

javascriptjqueryhtmlcapitalization
21
randomizertech

これにはCSSを使用します。

text-transform: uppercaseをスタイルに追加するだけで、サーバー側で大文字に変換できます。

input {
  text-transform: uppercase;
}
66
Brandon
$('input[type=text]').keyup(function() {
    $(this).val($(this).val().toUpperCase());
});
14
Gazler

使用する
oninput='this.value=this.value.toUpperCase();
このイベントはそのような場合にのみ使用され、ユーザー入力（キーを押す）の後、更新（値の表示）の前に発生するため、この入力されたテキストは変換中にちらつきが発生せず、値も正しいです（スタイルのみを使用して、実際のデータを変更せずに表示を変更します）。

5
Cpt Balu

これらの組み合わせを使用する必要がある場合があります。

テキスト変換スタイルを使用すると、タイプは大文字でのみレンダリングされますが、値は小文字の場合もあります。

JavaScriptは、フィールドが変更されるかフォーカスが失われた場合にのみ、現在のテキストを上部に変更します

あなたはgazlerのjqueryを使用するか、単にJavaScriptをインライン化することができます

例えばonblur = 'javascript：this.value = this.value.toUpperCase（）;'

これは、テキスト値が大文字で表示され、値が変更/コントロールがフォーカスを失うと実際には大文字になることを意味します。

HTHサム

1
sambomartin

@Gazlerの答えに基づいて、修飾キーをより適切に処理する拡張ソリューション（大文字と小文字が混在するプレースホルダーがあり、text-transform: uppercase;）：

$('.search-input input[type=text]').keyup(function() {
    var v = $(this).val();
    var u = v.toUpperCase();
    if( v != u ) $(this).val( u );
})
0
sean2078