入力ボックスのテキストを強制的に大文字で表示するにはどうすればよいですか? (コード例)

この記事の内容は、入力ボックスの文字を強制的に大文字で表示する方法を紹介するものです。 (コードサンプル), 強制的に大文字に変換する複数の方法をみんなでマスターしましょう。困っている友人は参考にしていただければ幸いです。

フォームでは、特定の入力フィールドまたはテキストエリア フィールドでのみ大文字のテキストを受け入れたい場合があります。では、入力された小文字を強制的に大文字に変換するにはどうすればよいでしょうか? JavaScript から CSS、サーバーサイド コードまで、この厄介な問題を解決する方法は実際にはたくさんあります。

簡単なコード例を通して実装方法を見てみましょう。

1. 入力時に JavaScript を使用してテキストを変更します (英語入力を使用する必要があります)

toUpperCase() を使用して大文字を変換します

これは最も明白で一般的な方法ですが、最もユーザーフレンドリーではありません。キーストロークごとに JavaScript イベントが起動され、値が大文字に変換されます。

<input type="text" onkeyup="this.value = this.value.toUpperCase();">

効果を見てみましょう。小文字の「a」を入力すると、次のように表示されます。

ただし、この方法では他の問題が発生します。問題:

1. 中国語の入力方法を使用して、Shift キーを押して文字を入力すると、繰り返し文字が表示されるため、英語入力を使用する必要があります。

2. 上の入力ボックスに「AAA」と入力し、中央の「A」を選択して「ABBA」に変更してみてください。値を設定するとカーソルがテキストの末尾に移動するため、最終的には「ABAB」になります。

次に改善します。カーソル位置を特定します。

カーソルをテキスト内の以前の位置に移動して入力すると、エコーされて次のようになります。文末に入力されました。したがって、カーソル位置を保持するために追加のコードが必要です:

<input type="text" onkeyup="
  var start = this.selectionStart;
  var end = this.selectionEnd;
  this.value = this.value.toUpperCase();
  this.setSelectionRange(start, end);
">

効果を確認するには、ss:

と入力し、「AAA」と入力すると、真ん中の「A」を選択して「ABBA」に変更しようとすると、「ABAB」の結果は表示されなくなります。

2. CSS php を使用してテキストを変更する

実際には、フォーム入力が大文字か小文字かは関係ありません。重要なことは次のとおりです。

1. ユーザーに表示されるテキストが使用されます。

2. フォーム ハンドラーは、使用前にテキストを大文字に変換します。

これを念頭に置くと、前述の JavaScript をすべて捨てて、代わりに単純な CSS および PHP (または同等のバックエンド) ソリューションを使用できます。

html css code

<input style="text-transform: uppercase;" type="text" name="fieldname">

phpコード:

<?PHP
  $_POST[&#39;fieldname&#39;] = strtoupper($_POST[&#39;fieldname&#39;]);
?>

レンダリング:

適切なテクニックを使用すれば、これがいかに簡単であるかわかりますか。単一の CSS スタイル (外部スタイルシートに移動可能) と PHP 行がすでに存在している可能性があります。 JavaScript や jQuery は必要ありません。

まとめ: この記事で紹介した内容は以上です。皆様の学習に少しでもお役に立てれば幸いです。

以上が入力ボックスのテキストを強制的に大文字で表示するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。