jQuery テキストボックスの値を取得/設定する

jQueryのテキストボックスの値を取得/設定するサンプルです。

目次 テキストボックスの値を取得する
  テキストボックスに値を設定する
入力不可にする(disabled)
読み取り専用にする(readonly)
disabledとreadOnlyの違い

テキストボックスの値を取得する

ボタンを押すとテキストボックスの値を取得するサンプルです。

取得した値

 

上記サンプルのコードです。

<p>取得した値 <span id="span1"></span></p>
<input type="text" value="red" id="text1" maxlength="5" />
<input type="button" id="button1" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function () {
    const str1 = $("#text1").val();
    $("#span1").text(str1);
  });
</script>

2行目は、テキストボックスです。id="text1"があります。
8行目は、IDセレクタのtext1で対象を特定(2行目)しvalメソッドでvalue値を取得しています。
9行目は、value値を画面に表示しています。

 

idを指定しない場合

idを指定しない場合は、フォームとnameを指定します。

<p>取得した値 <span id="span3"></span></p>
<input type="text" name="test3" value="red" maxlength="5">
<input type="button" id="button5" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	$("#button5").click(function() {
		const str1 = $('input:text[name="test3"]').val();
		$("#span3").text(str1);
	});
</script>

8行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(2行目)して、valメソッドでvalue値を取得し変数「str1」に代入します。

 

テキストボックスに値を設定する

ボタンを押すとテキストボックスに値を設定するサンプルです。

 

上記サンプルのコードです。

<input type="text" value="blue" id="text2" maxlength="5" />
<input type="button" id="button3" value="ボタン" />
<input type="button" id="button4" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button3").click(function () {
    $("#text2").val("red");
  });
  $("#button4").click(function () {
    $("#text2").val(""); // クリア
  });
</script>

1行目は、テキストボックスです。id="text2"があります。
8行目は、IDセレクタのtext2で対象を特定(1行目)しvalメソッドでvalue値を設定しています。

 

idを指定しない場合

idを指定しない場合は、フォームとnameを指定します。

<input type="text" name="test4" value="green" maxlength="5" />
<input type="button" id="button7" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button7").click(function () {
    $('input:text[name="test4"]').val("red");
  });
</script>

1行目は、テキストボックスです。
7行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(1行目)して、valメソッドでvalue値に値「red」を代入しています。

セレクタ

以下は、上記コードで使用しているセレクタです。
 input・・・要素セレクタ
 :text・・・jQueryの拡張セレクタ
 [name="test1"]・・・属性セレクタ
jQuery セレクタのサンプル(変数/AND/OR)

 

入力不可にする(disabled)

入力不可は、prop("disabled",true)を使用します。

<input type="text" value="red" id="text1" maxlength="5" />
<input type="button" id="button1" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function () {
    $("#text1").prop("disabled",true);
    // $("#text1").prop("disabled",false);
  });
</script>

7行目は、テキストボックスを入力不可にしています。
8行目は、入力不可の状態を解除します。

 

読み取り専用にする(readonly)

読み取り専用は、prop("readonly",true)を使用します。

<input type="text" value="red" id="text1" maxlength="5" />
<input type="button" id="button1" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function () {
    $("#text1").prop("readonly",true);
    // $("#text1").prop("readonly",false);
  });
</script>

7行目は、テキストボックスを読み取り専用にしています。
8行目は、読み取り専用の状態を解除します。

disabledとreadOnlyの違い

両方ともユーザーからの入力は不可です。
WebシステムでPost送信したとき、disabledは値が送信されません。readOnlyは値が送信されます。

関連の記事

jQuery hiddenの値を取得/設定するサンプル
jQuery テキストエリアの値を取得/設定する

△上に戻る