JavaScriptのtextareaオブジェクトの操作方法 | 千葉で集客ホームページ制作はティーエスフォート
コラム

JavaScriptのtextareaオブジェクトの操作方法

JavaScriptのtextareaオブジェクトの操作方法

今回の記事では、JavaScriptのtextareaオブジェクトの操作方法について、サンプルコードを使いながら解説していきます。

textareaの値の取得、設定、初期値変更、サイズ変更、文字数制限についてご紹介します。

はじめに

今回の記事では、JavaScriptのtextareaオブジェクトの操作方法について、サンプルコードを使いながら解説していきます。

textareaの値の取得、設定、初期値変更、サイズ変更、文字数制限についてご紹介します。

textareaオブジェクトとは

textareaオブジェクトは、 textarea要素をJavaScriptで扱う際の通称です。textarea要素は複数行のテキストを入力するのに適した要素でもあります。

webサイトを閲覧・利用しているときに、使い慣れているのがtextareaでしょう。入力フォームにもよく使われています。

textareaの値を取得する方法

textareaの値を取得するためには、valueプロパティを使用します。

以下のような使い方です。

document.getElementById("input_message").value

textareaの内容を変更する方法

textareaに入力されている内容を変更する場合にもvalueプロパティを使用します。

getElementById()で取得した後にvalueに変更後の内容を代入します。

document.getElementById("input_message").value = new_message

textareaの初期値を変更する方法

以下の2種類の方法で初期値を変更することができます。
コードは異なりますが、実現していることは同じです。

document.Form名.textarea名.defaultValue = デフォルトテキスト
textareaオブジェクト.defaultValue = デフォルトテキスト


defaultValueプロパティは、textareaの初期値を設定・取得します。

初期値とは、あらかじめtextareaに入力しておく値のことです。

formを使った変更方法


function fGetDefValue(){
  var elm=document.forms["form_sample"].elements["ta"];
  /* textareaの初期値を取得 */
  alert("textareaの初期値は\n「"+elm.defaultValue+"」\nです");
  /* textareaを空状態にする */
  elm.value="";
}


getElementById()を使った変更方法


function fGetDefValueDOM(){
  var taObj=document.getElementById("ta");
  /* textareaの初期値を取得 */
  alert("textareaの初期値は\n「"+taObj.defaultValue+"」\nです");
  /* textareaを空にする */
  taObj.value="";
}

textareaのサイズを変更する方法

textareaのサイズを変更するにはrowsプロパティやcolsプロパティを使用します。

document.getElementById("input_message").rows="10"
document.getElementById("input_message").cols="60"


rowsがtextareaの縦の長さ、colsがtextareaの横の長さを設定するプロパティです。

ユーザーに入力してもらう文字数を想定して領域の大きさを設定する時に、このプロパティを適切な大きさに設定するとよいでしょう。

textareaの文字数を制限する

フォームのtextareaなどでよく文字数制限を設けているのを見かけます。
そして自分でフォームを作るときにも、長すぎると困るので、字数制限を設けたい思うことがよくあるでしょう。

textareaで文字数制限をする方法はとても簡単です。

それはmaxlength属性で文字数を設定してあげるだけです。設定した数以上の文字を入力できないようになります。


<textarea cols="30" rows="10"></textarea>


ここではmaxlength="30"として設定しています。

まとめ

今回は、JavaScriptの中でtextareaオブジェクトについてご紹介しました。

ユーザーが入力するフォームはwebサイトで使用頻度が高いものでもあるため、うまく活用することでより使い勝手のよいサイトにすることができるでしょう。

ぜひ自社のwebサイトにも導入を検討してみてください。
ページ先頭へ