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

nas2017/06/30

目次

01. テキストエリア(textarea)

・テキストエリアとは

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

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

02. テキストエリア(textarea)+α

・入力時に値を取得する(inputイベント)

・カーソル移動時/Enterキー押下時に値を取得する(changeイベント)

・フォーカスを当てる/外す(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の例です。

 

上記のcolsを指定したコードです。

<textarea id="txt1" cols="10" rows="5" maxlength="15"></textarea>

 

以下はcolsが30の例です。

上記のcolsを指定したコードです。

<textarea id="txt1" cols="30" rows="5" maxlength="15"></textarea>

 

rowsとは

rowsは行数です。以下はrowsが5の例です。

上記のrowsを指定したコードです。

<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を指定した例です。薄い文字が表示されます。

 

上記の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"を代入しています。

 

入力時に値を取得する(inputイベント)

テキストエリアに入力した値を画面に表示します。

取得した値

 

上記サンプルのコード

<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行目の関数を実行します。

 

カーソル移動時/Enterキー押下時に値を取得する(changeイベント)

値を入力し、カーソル移動時またはEnterキー押下時にテキストエリアの値を画面に表示します。

取得した値

 

上記サンプルのコード

<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行目は、テキストエリアの書き込みを不可にしています。

関連の記事

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

△上に戻る