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

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

目次

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

テキストエリアのnameを指定して値を取得/設定するサンプルです。
7行目は、textareaセレクタとnameの名称で対象を特定(20行目)しvalメソッドでvalue値を設定しています。
9行目は、textareaセレクタとnameの名称で対象を特定(20行目)しvalメソッドでvalue値を取得しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	$("#b1").click(function() {
		// 値を設定
		$('textarea[name="test1"]').val("100");
		// 値を取得
		str1 = $('textarea[name="test1"]').val();
		$("#sp1").text(str1);
	});
	$("#b2").click(function() {
		$('textarea[name="test1"]').val(""); //クリア
		str1 = $('#txt1').val();
		$("#sp1").text(str1);
	});
});
</script>
<p>セットした値 <span id="sp1"></span></p>
<textarea name="test1" value="1" id="txt1" cols="50" rows=5></textarea><br/>
<input type="button" id="b1" value="ボタン1" />
<input type="button" id="b2" value="クリア" />

サンプル

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

セットした値


セレクタ

以下は、上記コードで使用しているセレクタです。
 textareaセレクタ・・・要素セレクタ
 [name="test1"]・・・属性セレクタ
jQuery セレクタの一覧

 

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

テキストエリアのidを指定して値を取得/設定するサンプルです。
7行目は、IDセレクタ(#txt1)で対象を特定(20行目)しvalメソッドでvalue値を設定しています。
9行目は、IDセレクタ(#txt1)で対象を特定(20行目)しvalメソッドでvalue値を取得しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	$("#b3").click(function() {
		// 値を設定
		$('#txt2').val("200");
		// 値を取得
		str1 = $('#txt2').val();
		$("#sp2").text(str1);
	});
	$("#b4").click(function() {
		$('#txt2').val(""); //クリア
		str1 = $('#txt2').val();
		$("#sp2").text(str1);
	});
});
</script>
<p>セットした値 <span id="sp2"></span></p>
<textarea name="test1" value="1" id="txt2" cols="50" rows=5></textarea><br/>
<input type="button" id="b3" value="ボタン2" />
<input type="button" id="b4" value="クリア" />

サンプル

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

セットした値


セレクタ

以下は、上記コードで使用しているセレクタです。
 #txt1・・・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

IDセレクタ

関連の記事

CSS 属性セレクタのサンプル(要素名[属性名="値"])
jQuery hiddenの値を取得/設定するサンプル
jQuery ラジオボタンの値を取得/設定するサンプル
jQuery チェックボックスの値を取得/設定するサンプル
jQuery セレクトボックスの値を取得/設定するサンプル
jQuery テキストボックスの値を取得/設定するサンプル
JavaScript テキストエリアの値を取得/設定するサンプル

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る