JavaScriptのテキストエリアの値を取得/設定するサンプルです。
確認環境 ・Windows10 ・Google Chrome/IE11 |
目次
- テキストエリアの値を取得する(フォームとname)
- テキストエリアに値を設定する(フォームとname)
- テキストエリアの値を取得する(getElementByIdメソッド)
- テキストエリアに値を設定する(getElementByIdメソッド)
テキストエリアの値を取得する(フォームとname)
ボタンを押すとテキストエリアの値を取得するサンプルです。
フォームと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()"/>
<input type="button" value="クリア" onclick="clickBtn2()"/>
<script>
function clickBtn1(){
// 値を取得
const ta1 = document.form1.textarea1.value;
document.getElementById("span1").textContent = ta1;
}
function clickBtn2(){
document.getElementById("span1").textContent = "";
}
</script>
3行目は、テキストエリアです。
5行目のボタンをクリックすると9行目の関数が実行されます。
11行目は、2行目のフォームのname「form1」と3行目のテキストエリアのname「textarea1」で対象を特定(3行目)、そのvalueから値を取得し変数「ta1」に代入します。
12行目は、変数「ta1」の値を1行目に文字として表示しています。
14~16行目は、テキストのエリアに空文字「""」をセットしてクリアしています。
テキストエリアに値を設定する(フォームとname)
ボタンを押すとテキストエリアに値を設定するサンプルです。
フォームとnameを使用するやり方です。
コード
上記サンプルのコードです。
<form name="form2">
<textarea name="textarea2" value="1" cols="50" rows=5 maxlength="15">テスト</textarea>
</form>
<input type="button" value="ボタン" onclick="clickBtn3()"/>
<input type="button" value="クリア" onclick="clickBtn4()"/>
<script>
function clickBtn3(){
// 値を設定
document.form2.textarea2.value = "blue";
}
function clickBtn4(){
document.form2.textarea2.value = "";
}
</script>
2行目は、テキストエリアです。
4行目のボタンをクリックすると8行目の関数が実行されます。
10行目は、1行目のフォームのname「form2」と2行目のテキストエリアのname「textarea2」で対象を特定(2行目)し、そのvalueの値に"blue"を代入しています。
12~14行目は、テキストエリアのvalueに空文字「""」をセットしてクリアしています。
テキストエリアの値を取得する(getElementByIdメソッド)
ボタンを押すとテキストエリアの値を取得するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても取得できます。
取得した値
コード
上記サンプルのコードです。
<p>取得した値 <span id="span3"></span></p>
<textarea id="textarea3" value="1" cols="50" rows=5 maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtn5()"/>
<input type="button" value="クリア" onclick="clickBtn6()"/>
<script>
function clickBtn5(){
// 値を取得
const ta3 = document.getElementById("textarea3").value;
document.getElementById("span3").textContent = ta3;
}
function clickBtn6(){
document.getElementById("span3").textContent = "";
}
</script>
2行目は、テキストエリアです。
3行目のボタンをクリックすると7行目の関数が実行されます。
9行目は、getElementByIdメソッドで2行目のID「textarea3」を指定して対象を特定(2行目)し、そのvalueから値を取得し変数「ta3」に代入します。
10行目は、変数「ta3」の値を1行目のテキストのエリアに表示します。
12~14行目は、テキストのエリアに空文字「""」をセットしてクリアしています。
テキストエリアに値を設定する(getElementByIdメソッド)
ボタンを押すとテキストエリアに値を設定するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても設定できます。
コード
上記サンプルのコードです。
<textarea id="textarea4" value="1" cols="50" rows=5 maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtn7()"/>
<input type="button" value="クリア" onclick="clickBtn8()"/>
<script>
function clickBtn7(){
// 値を取得
document.getElementById("textarea4").value = "blue";
}
function clickBtn8(){
document.getElementById("textarea4").value = "";
}
</script>
1行目は、テキストエリアです。
2行目のボタンをクリックすると6行目の関数が実行されます。
8行目は、1行目のテキストエリアのid「textarea4」で対象を特定(1行目)し、そのvalueの値に"blue"を代入しています。
10~12行目は、テキストエリアのvalueに空文字「""」をセットしてクリアしています。
関連の記事
JavaScript ラジオボタンの選択されている値を取得するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定するサンプル
JavaScript テキストボックスの値を取得/設定する
JavaScript チェックボックスの値を取得/設定するサンプル
jQuery テキストエリアの値を取得/設定する