JavaScriptのテキストエリアの値を取得/設定するサンプルです。
目次
| サンプル | テキストエリアの値を取得する |
| テキストエリアに値を設定する | |
| テキストエリアから移動時に値を取得する | |
| テキストエリアにフォーカスを当てる/外す(focus/blur) | |
| テキストエリアの値を全選択にする/外す(select/blur) | |
| テキストエリアの値をコピーする(document.execCommand("copy")) | |
| テキストエリアを書き込み不可/可にする(disabled) |
テキストエリアの値を取得する
ボタンを押すとテキストエリアの値し画面に表示するサンプルです。
取得した値
上記サンプルのコード
<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"を代入しています。
テキストエリアから移動時に値を取得する
値を入力し、カーソルを移動(テキストエリアから外す)するとテキストエリアの値を取得し画面に表示します。
取得した値
上記サンプルのコード
<p>取得した値 <span id="spanEve"></span></p>
<textarea id="textareaEve" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<script>
const textEve = document.getElementById("textareaEve");
textEve.addEventListener("change", changeTextArea);
function changeTextArea() {
document.getElementById("spanEve").textContent = textEve.value;
}
</script>6行目は、addEventListenerで対象にchangeイベントが発生した時、8行目のchangeTextAreaの関数を実行します。
テキストエリアにフォーカスを当てる/外す(focus/blur)
上記サンプルのコード
<textarea id="textfoc" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtnFoc()" />
<input type="button" value="ボタンoff" onclick="clickBtnBlr()" />
<script>
function clickBtnFoc() {
const t1 = document.getElementById("textfoc");
t1.focus();
}
function clickBtnBlr() {
const t1 = document.getElementById("textfoc");
t1.blur();
}
</script>8行目のfocusは、フォーカスを当てます。
12行目のblurは、フォーカスを外します。
テキストエリアの値を全選択にする/外す(select/blur)
上記サンプルのコード
<textarea id="textsel" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタンon" onclick="clickBtnSel()" />
<input type="button" value="ボタンoff" onclick="clickBtnBlr2()" />
<script>
function clickBtnSel() {
const t1 = document.getElementById("textsel");
t1.select();
}
function clickBtnBlr2() {
const t1 = document.getElementById("textsel");
t1.blur();
}
</script>8行目のselectは、値を全選択にします。
12行目のblurは、値の全選択を外します。
テキストエリアの値をコピーする(document.execCommand("copy"))
値を全選択してコピーします。値はテキスト等に貼り付けできます。
上記サンプルのコード
<textarea id="textcopy" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタンon" onclick="clickBtnCopy()" />
<script>
function clickBtnCopy() {
const t1 = document.getElementById("textcopy");
t1.select();
var result = document.execCommand("copy");
}
</script>7行目は、テキストエリアの値を全選択しています。
8行目は、選択した値をコピーしています。テキスト等にコピーした内容を貼り付けることができます。
テキストエリアを書き込み不可/可にする(disabled)
上記サンプルのコード
<textarea id="textdis" value="1" cols="50" rows="5" maxlength="15">テスト</textarea>
<input type="button" value="ボタン" onclick="clickBtnDisable()" />
<script>
function clickBtnDisable() {
const t1 = document.getElementById("textdis");
if (t1.disabled == false) {
t1.disabled = true;
} else {
t1.disabled = false;
}
}
</script>
8行目は、テキストエリアの書き込みを不可にしています。
関連の記事