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

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

確認環境
・Google Chrome/IE11

目次

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

テキストエリアの値を取得する

ボタンを押すとテキストエリアの値し画面に表示するサンプルです。

取得した値

 

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

<p>取得した値 <span id="span3"></span></p>
<textarea id="textarea3" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtn5()" />

<script>
  function clickBtn5() {
    const ta3 = document.getElementById("textarea3").value;
    document.getElementById("span3").textContent = ta3;
  }
</script>

2行目は、テキストエリアです。id="textarea3"があります。
3行目のボタンをクリックすると6行目の関数が実行されます。
7行目は、getElementByIdメソッドで2行目のID「textarea3」を指定し、そのvalueから値を取得し変数「ta3」に代入します。
8行目は、変数「ta3」の値を1行目のテキストのエリアに表示します。

getElementByIdメソッドは、フォーム(form)がなくてもvalue値を取得できます。

 

getElementByIdを使用しない場合

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

<p>取得した値 <span id="span1"></span></p>
<form name="form1">
  <textarea name="textarea1" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
</form>
<input type="button" value="ボタン" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const ta1 = document.form1.textarea1.value;
    document.getElementById("span1").textContent = ta1;
  }
</script>

9行目は、2行目のフォームのname「form1」と3行目のテキストエリアのname「textarea1」で対象を特定(3行目)し、そのvalueから値を取得し変数「ta1」に代入します。

 

テキストエリアに値を設定する

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

 

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

<textarea id="textarea4" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtn7()" />

<script>
  function clickBtn7() {
    document.getElementById("textarea4").value = "blue";
  }
</script>

1行目は、テキストエリアです。id="textarea4"があります。
2行目のボタンをクリックすると5行目の関数が実行されます。
6行目は、getElementByIdメソッドで1行目のテキストエリアのid「textarea4」を指定し、そのvalueの値に"blue"を代入しています。
テキストエリアをクリアする場合は、空文字("")をセットします。

 

getElementByIdを使用しない場合

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

<form name="form2">
<textarea name="textarea2" value="1" cols="50" rows=5 maxlength="15">テスト</textarea>
</form>
<input type="button" value="ボタン" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	document.form2.textarea2.value = "blue";
}
</script>

8行目は、1行目のフォームのname「form2」と2行目のテキストエリアのname「textarea2」で対象を特定(2行目)し、そのvalueの値に"blue"を代入しています。。

関連の記事

JavaScript ラジオボタンの選択されている値を取得するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定する
JavaScript テキストボックスの値を取得/設定する
JavaScript チェックボックスの値を取得/設定する
jQuery テキストエリアの値を取得/設定する

△上に戻る