目次
| textarea | テキストエリアとは |
| テキストエリアの値を取得する | |
| テキストエリアに値を設定する | |
| textarea+α | 入力時に値を取得する |
| 移動時に値を取得する | |
| フォーカスを当てる/外す(focus/blur) | |
| 値を全選択にする/外す(select/blur) | |
| 値をコピーする(document.execCommand("copy")) | |
| 入力不可/可にする(disabled) |
テキストエリアとは
以下は実際のテキストエリアです。文字を入力できます。
上記テキストエリアのhtmlのコードです。
<textarea id="text1" cols="20" maxlength="15" rows="3">test</textarea>
テキストエリアは、改行を含めた文字を入力できます。
textareaタグを使用します。
maxlengthで最大の文字入力数を指定できます。
入力欄の右下の角をドラッグで枠を拡大縮小できます。
拡大縮小させたくないときは、cssでtextarea{resize:none;}を設定します。
テキストエリアに入力された値はJavaScriptで取得できます。
colsとは
colsは横幅です。以下はcolsが10の例です。
<textarea id="txt1" cols="10" rows="5" maxlength="15"></textarea>
以下はcolsが30の例です。
<textarea id="txt1" cols="30" rows="5" maxlength="15"></textarea>
rowsとは
rowsは行数です。以下はrowsが5の例です。
<textarea id="txt1" cols="30" rows="5" maxlength="15"></textarea>
CSSで縦と横を指定する
CSSでも縦幅と横幅を指定できます。
<textarea id="txt2" style="width:100px;height:100px;" maxlength="15"></textarea>横(width)を100px,縦(height)を100pxにしています。
placeholder
以下は、テキストエリアにplaceholderを指定した例です。
<textarea id="txt2" placeholder="test" cols="20" maxlength="15" rows="3" ></textarea>placeholderは、入力例、ダミーテキストの意味で初期表示時に薄い文字が表示されます。
利用者に入力のヒントを与えます。入力自体に影響はありません。
テキストエリアの値を取得する
ボタンを押すとテキストエリアの値を取得し画面に表示します。
取得した値
上記サンプルのコード
<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="span12"></span></p>
<textarea id="textarea12" value="" cols="50" rows="5" maxlength="99"></textarea>
<script>
const textarea = document.getElementById("textarea12");
textarea.addEventListener("input", changeTextArea1);
function changeTextArea1() {
document.getElementById("span12").textContent = textarea.value;
}
</script>
6行目は、addEventListenerで対象にinputイベントが発生した時、8行目の関数を実行します。
移動時に値を取得する
値を入力し、カーソルを移動(テキストエリアから外す)するとテキストエリアの値を画面に表示します。
取得した値
上記サンプルのコード
<p>取得した値 <span id="spanEve"></span></p>
<textarea id="textareaEve" value="1" cols="50" rows="5" maxlength="99">テスト</textarea>
<script>
const textEve = document.getElementById("textareaEve");
textEve.addEventListener("change", changeTextArea);
function changeTextArea() {
document.getElementById("spanEve").textContent = textEve.value;
}
</script>6行目は、addEventListenerで対象にchangeイベントが発生した時、8行目の関数を実行します。
フォーカスを当てる/外す(focus/blur)
ボタンを押すとフォーカスがあたります。ボタンoffを押すとフォーカスが外れます。
上記サンプルのコード
<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)
ボタンonを押すと値を全選択します。ボタンoffを押すと選択が外れます。
上記サンプルのコード
<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行目は、テキストエリアの書き込みを不可にしています。
関連の記事