jQuery で入力値を設定する

jQuery の val() メソッドを使うと、入力値の設定や現在値の取得、現在値をもとにした新しい値の生成ができます。対象の入力を選択し、.val("new value") を呼び出して値を更新します。以下の例では、値の設定、コールバック形式、値の取得、およびよくある間違いを防ぐための確認事項を説明します。

.val() で入力値を設定する

jQuery の選択結果に .val(value) を呼び出すと、一致したすべての要素に値を設定できます。たとえば、$("#email").val("reader@example.com") は、ID が email の入力値を設定します。セレクターと文字列は、ページに合わせて置き換えてください。$(".email") のようなクラスセレクターは複数の入力に一致することがあるため、一致したすべてのフィールドを設定する場合にだけ使います。

呼び出し時に対象の要素が存在している必要があります。呼び出しを $(function () { ... }) のような ready ハンドラー内に置くか、対象のフォームのマークアップより後にスクリプトを読み込みます。セレクターに一致する要素がなければ、値は更新されません。値が変わらない場合は、セレクターと要素の ID またはクラスを確認してください。

コールバックで入力値を更新する

新しい値を各入力の現在値に応じて決める場合は、.val() に関数を渡します。jQuery は一致した各要素についてその関数を呼び出し、引数として 0 から始まる位置と現在値を渡します。設定する値を関数から返してください。これらの引数はコールバックに渡される入力値であり、自動的に返される値ではありません。この形式を使うと、複数のフィールドを個別に読み取って設定する手順を分けずに変換できます。

たとえば、次のコールバックの処理は現在値を大文字にして返します。これは変換方法を示す単独の JavaScript 例です。ページ上では、選択した入力に対する .val() にこのコールバックを渡します。

このセクションのコードと表示されるラベルや出力は英語のままです。

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

一般的な「フォーカスを外したときに大文字にする」動作を実現するには、blur ハンドラーを登録し、その中で $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); }) を使います。ユーザーがフィールドから移動すると、コールバックが返した文字列でそのフィールドの値が置き換わります。index が不要であれば、省略できます。

.val() で入力値を取得する

引数を指定せずに .val() を呼び出すと、選択結果の先頭要素の値を取得できます。たとえば、const email = $("#email").val(); は現在値を email に格納するため、コード内で値を確認したり、ほかの処理に使ったりできます。セレクターが複数の要素に一致しても、取得されるのは先頭の要素の値だけです。すべての値が必要な場合は、要素ごとに処理してください。

入力から取得した値は文字列です。後続の処理で数値が必要なら、明示的に変換してください。また、ユーザーが実際に入力したテキストを考慮します。取得されるのは現在のフィールド値なので、ページの読み込み後に値が変更されている場合があります。

入力値を設定するときの確認事項

• セレクターを確認する: ID、クラス、その他のセレクターが対象の入力に一致することを確認します。複数のフィールドに一致するセレクターは、すべてのフィールドを更新します。
• 実行タイミングを確認する: 入力要素が存在してから値を設定します。たとえば、jQuery の ready ハンドラー内、またはフォームのマークアップより後で実行します。
• 値の生成方法を確認する: コールバックを使う場合は、変換後の文字列を返します。コールバックには、要素の位置、現在値の順に引数が渡されます。
• イベントは別途処理する: .val() で値を設定しても、それだけでは change イベントは発生しません。プログラムからの更新にほかのコードを反応させる必要がある場合は、値を設定した後に .trigger("change") のように必要なイベントを明示的に発生させます。
• 表示と送信を区別する: .val() はコントロールの現在値を変更しますが、ページ上の無関係なテキストは更新せず、フォーム送信にそのフィールドが含まれることも保証しません。送信時の動作が重要な場合は、入力が有効でフォームに属していることを確認してください。