jQuery テキストエリアの値を取得/設定する

nas2017/06/30

目次

01. テキストエリア

・テキストエリアのidを指定して値を取得/設定する

・テキストエリアのnameを指定して値を取得/設定する

・入力不可にする(disabled)

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

・disabledとreadOnlyの違い

テキストエリアのidを指定して値を取得/設定する

ボタンを押すとidを指定して値を取得/設定するサンプルです。

セットした値


 

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

<p>セットした値 <span id="span2"></span></p>
<textarea name="test1" value="1" id="text2" cols="50" rows=5></textarea>
<input type="button" id="button3" value="ボタン2" />
<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("200");
		// 値を取得
		var str1 = $('#text2').val();
		$("#span2").text(str1);
	});
	$("#button4").click(function() {
		$('#text2').val(""); //クリア
		$("#span2").text("");
	});

</script>

2行目は、テキストエリアです。
11行目は、IDセレクタ(#text2)で対象を特定(2行目)しvalメソッドでvalue値を設定しています。
13行目は、IDセレクタ(#text2)で対象を特定(2行目)しvalメソッドでvalue値を取得しています。

セレクタ

以下は、上記コードで使用しているセレクタです。
　#txt1・・・IDセレクタ。指定されたid属性の要素を選択します。

valメソッド

  • jQueryのメソッドです。
  • val()は、valueの値を返します。
  • 以下はjQueryサイトの.val()メソッドのリンクです。
    http://api.jquery.com/val/

val(値)メソッド

  • jQueryのメソッドです。
  • val(value)は、valueに値をセットします。
  • 以下はjQueryサイトの.val(value)メソッドのリンクです。
    http://api.jquery.com/val/#val2

 

テキストエリアのnameを指定して値を取得/設定する

ボタンを押すとnameを指定して値を取得/設定するサンプルです。

値


 

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

<p>値 <span id="span1"></span></p>
<textarea name="test1" value="1" id="text1" cols="50" rows=5></textarea>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// 値を設定
		$('textarea[name="test1"]').val("100");
		// 値を取得
		var str1 = $('textarea[name="test1"]').val();
		$("#span1").text(str1);
	});
	$("#button2").click(function() {
		$('textarea[name="test1"]').val(""); //クリア
		$("#span1").text("");
	});

</script>

2行目は、テキストエリアです。
11行目は、textareaセレクタとnameの名称で対象を特定(2行目)しvalメソッドでvalue値を設定しています。
13行目は、textareaセレクタとnameの名称で対象を特定(2行目)しvalメソッドでvalue値を取得しています。

セレクタ

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

 

入力不可にする(disabled)

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

<textarea name="test1" value="1" id="text1" cols="50" rows="5"></textarea>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

  $("#button1").click(function () {
    $("#text1").prop("disabled", true);
  });
  $("#button2").click(function () {
    $("#text1").prop("disabled",false);
  });
</script>

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

 

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

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

<textarea name="test1" value="1" id="text1" cols="50" rows="5"></textarea>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

  $("#button1").click(function () {
    $("#text1").prop("readonly", true);
  });
  $("#button2").click(function () {
    $("#text1").prop("readonly",false);
  });
</script>

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

 

disabledとreadOnlyの違い

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

関連の記事

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

△上に戻る