formオブジェクトTextareaオブジェクト
- Textareaオブジェクト一覧
- テキストエリアのサイズを変更〔cols/rowsプロパティ〕
- テキストエリアのデフォルトテキストを設定･取得〔defaultValueプロパティ〕
- テキストエリアの無効化・有効化を設定･取得〔disabledプロパティ〕
- テキストエリアを読取専用にするか否かを設定･取得〔readOnlyプロパティ〕
- テキストエリアの型名を取得〔typeプロパティ〕
- テキストエリアの値を取得・設定〔valueプロパティ〕
- テキストエリアにフォーカスを当てる/フォーカスを外す/テキスト部分を選択する〔focusメソッド/blurメソッド/selectメソッド〕
Textareaオブジェクト一覧
unknown
テキストエリアのサイズを変更
cols/rowsプロパティ
unknown
document.Form名.Textarea名.cols = 幅（px）
document.Form名.Textarea名.rows = 高さ（px）
document.Form名.Textarea名.rows = 高さ（px）
colsプロパティは、テキストエリアの幅を取得・設定します。
rowsプロパティは、テキストエリアの高さを取得・設定します。
幅・高さには、1以上の整数値を指定します（0を指定するとエラーが発生）。 例えば、cols=5を指定すると5文字分の幅、rows=5を指定すると5行分の高さになります。
テキストエリアのサイズを変更サンプルを見る
<form action="#" name="frmCR">
<p>
サイズ変更:
<a href="javascript:fSetSize(60,10)">大きくする</a>
<a href="javascript:fSetSize(40,5)">元に戻す</a>
</p>
<p><textarea name="taA" cols="40" rows="5">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetSize(_cols,_rows){
var elm=document.forms["frmCR"].elements["taA"];
/* テキストエリアの幅（cols属性）を設定 */
elm.cols=_cols;
/* テキストエリアの高さ（rows属性）を設定 */
elm.rows=_rows;
fGetSize();
}
/* テキストエリアのcols/rows属性を取得 */
function fGetSize(){
var elm=document.forms["frmCR"].elements["taA"];
var s="";
s+="幅: "+elm.cols+"\n";
s+="高さ: "+elm.rows+"\n";
elm.value=s;
}
</script>
DOMの場合
テキストエリアオブジェクト.cors = 幅（px）
テキストエリアオブジェクト.cors = 高さ（px）
テキストエリアオブジェクト.cors = 高さ（px）
テキストエリアのサイズを変更（DOM）サンプルを見る
<form action="#">
<p>
サイズ変更:
<a href="javascript:fSetSizeDOM(60,10)">大きくする</a>
<a href="javascript:fSetSizeDOM(40,5)">元に戻す</a>
</p>
<p><textarea id="taA2" cols="40" rows="5">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetSizeDOM(_cols,_rows){
var taObj=document.getElementById("taA2");
/* テキストエリアの幅（cols属性）を設定 */
taObj.cols=_cols;
/* テキストエリアの高さ（rows属性）を設定 */
taObj.rows=_rows;
fGetSizeDOM();
}
/* テキストエリアのcols/rows属性を取得 */
function fGetSizeDOM(){
var taObj=document.getElementById("taA2");
var s="";
s+="幅: "+taObj.cols+"\n";
s+="高さ: "+taObj.rows+"\n";
taObj.value=s;
}
</script>
テキストエリアのデフォルトテキストを設定･取得
defaultValueプロパティ
unknown
document.Form名.Textarea名.defaultValue = デフォルトテキスト
Textareオブジェクト.defaultValue = デフォルトテキスト
Textareオブジェクト.defaultValue = デフォルトテキスト
defaultValueプロパティは、テキストエリアの初期値を設定・取得します。
初期値とは、あらかじめテキストエリアに入力しておく値のことです。 以下の例のように、テキストエリアの値（value属性）を空にしてもデフォルトテキストは取得できます。
サンプルを見る<form action="#" name="frmB">
<p>
<input type="button" value="デフォルトテキスト取得" onclick="fGetDefValue()" />
<input type="button" value="デフォルトテキスト取得（DOM）" onclick="fGetDefValueDOM()" />
</p>
<p><textarea id="taB">ここに何かを入力してください。</textarea></p>
</form>
<script type="text/javascript">
function fGetDefValue(){
var elm=document.forms["frmB"].elements["taB"];
/* デフォルトテキスト取得 */
alert("デフォルトテキストは\n「"+elm.defaultValue+"」\nです");
/* テキストエリアを空にする */
elm.value="";
}
function fGetDefValueDOM(){
var taObj=document.getElementById("taB");
/* デフォルトテキスト取得 */
alert("デフォルトテキストは\n「"+taObj.defaultValue+"」\nです");
/* テキストエリアを空にする */
taObj.value="";
}
</script>
テキストエリアの無効化・有効化を設定･取得
disabledプロパティ
unknown
document.Form名.Textarea名.disabled = true | false
disabledプロパティは、テキストエリアの無効化（TRUE）・有効化（FALSE）を取得・設定します。
テキストエリアの有効化・無効化を取得・設定サンプルを見る
<form action="#" name="frmC">
<p>
テキストエリア：
<input type="button" value="無効化" onclick="fSetDisabled(true)" />
<input type="button" value="有効化" onclick="fSetDisabled(false)" />
</p>
<p><textarea name="taC">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetDisabled(_bool){
var elm=document.forms["frmC"].elements["taC"];
elm.disabled=_bool;
elm.value="disabled="+elm.disabled;
}
</script>
DOMの場合
テキストエリアオブジェクト.disabled = true | false
テキストエリアの有効化・無効化を取得・設定（DOM）サンプルを見る
<form action="#">
<p>
テキストエリア：
<input type="button" value="無効化" onclick="fSetDisabledDOM(true)" />
<input type="button" value="有効化" onclick="fSetDisabledDOM(false)" />
</p>
<p><textarea id="taC2">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetDisabledDOM(_bool){
var taObj=document.getElementById("taC2");
taObj.disabled=_bool;
taObj.value="disabled="+taObj.disabled;
}
</script>
テキストエリアを読取専用にするか否かを設定･取得
readOnlyプロパティ
unknown
document.Form名.Textarea名.readOnly = true | false
readOnlyプロパティは、テキストエリアを読み取り専用にする（TRUE）か否か（FALSE）を取得・設定します。 読取専用（TRUE）にした場合、テキストエリアに入力することはできません。
テキストエリアの読取専用を取得･設定サンプルを見る
<form action="#" name="frmD">
<p>
テキストエリア：
<input type="button" value="読取専用" onclick="fSetReadOnly(true)" />
<input type="button" value="解除" onclick="fSetReadOnly(false)" />
</p>
<p><textarea name="taD">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetReadOnly(_bool){
var elm=document.forms["frmD"].elements["taD"];
elm.readOnly=_bool;
elm.value="readOnly = "+elm.readOnly;
}
</script>
DOMの場合
テキストエリアオブジェクト.readOnly = true | false
テキストエリアの読取専用を取得・設定（DOM）サンプルを見る
<form action="#">
<p>
テキストエリア：
<input type="button" value="読取専用" onclick="fSetReadOnlyDOM(true)" />
<input type="button" value="解除" onclick="fSetReadOnlyDOM(false)" />
</p>
<p><textarea id="taD2">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fSetReadOnlyDOM(_bool){
var taObj=document.getElementById("taD2");
taObj.readOnly=_bool;
taObj.value="readOnly = "+taObj.readOnly;
}
</script>
テキストエリアの型名を取得
typeプロパティ
unknown
document.Form名.Textarea名.type
typeプロパティは、テキストエリアの型名を取得・設定します。
テキストエリアの型名を取得サンプルを見る
<form action="#" name="frmE">
<p><input type="button" value="タイプ取得" onclick="fGetType()" /></p>
<p><textarea name="taE">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fGetType(){
var taElm=document.forms["frmE"].elements["taE"];
taElm.value="type = "+taElm.type;
}
</script>
DOMの場合
テキストエリアオブジェクト.type
テキストエリアの型名を取得（DOM）サンプルを見る
<form action="#">
<p><input type="button" value="タイプ取得" onclick="fGetTypeDOM()" /></p>
<p><textarea id="taE2">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fGetTypeDOM(){
var taObj=document.getElementById("taE2");
taObj.value="type = "+taObj.type;
}
</script>
テキストエリアの値を取得・設定
valueプロパティ
unknown
document.Form名.Textarea名.value = 値
valueプロパティは、テキストエリアの値（テキスト部分）を取得・設定します。
テキストエリアの値をコピーサンプルを見る
<form action="#" name="frmF">
<p><textarea name="taF">テキストエリアです。</textarea></p>
<p><input type="button" value="▼ コピーする" onclick="fCopy()" /></p>
<p><textarea name="taFCopy" readonly></textarea></p>
</form>
<script type="text/javascript">
function fCopy(){
var taElm=document.forms["frmF"].elements["taF"];
var taElmCopy=document.frmF.elements["taFCopy"];
taElmCopy.value=taElm.value;
}
</script>
DOMの場合
テキストエリアオブジェクト.value = 値
テキストエリアの値をコピー（DOM）サンプルを見る
<form action="#">
<p><textarea id="taF2">テキストエリアです。</textarea></p>
<p><input type="button" value="▼ コピーする" onclick="fCopyDOM()" /></p>
<p><textarea id="taFCopy2" readonly="readonly"></textarea></p>
</form>
<script type="text/javascript">
function fCopyDOM(){
var taObj=document.getElementById("taF2");
var taObjCopy=document.getElementById("taFCopy2");
taObjCopy.value=taObj.value;
}
</script>
テキストエリアにフォーカスを当てる/フォーカスを外す/テキスト部分を選択する
focusメソッド/blurメソッド/selectメソッド
unknown
document.Form名.Textarea名.focus();
document.Form名.Textarea名.blur();
document.Form名.Textarea名.select();
document.Form名.Textarea名.blur();
document.Form名.Textarea名.select();
メソッドの使用例サンプルを見る
<form action="#" name="frmG">
<p>
<input type="button" value="フォーカスを当てて、テキスト部分を選択" onclick="fFocusSelect()" />
<input type="button" value="フォーカスを外す" onclick="fBlur()" />
</p>
<p><textarea name="taG">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fFocusSelect(){
var elm=document.forms["frmG"].elements["taG"];
elm.focus();
elm.select();
}
function fBlur(){
var elm=document.forms["frmG"].elements["taG"];
elm.blur();
}
</script>
DOMの場合
テキストエリアオブジェクト.focus();
テキストエリアオブジェクト.blue();
テキストエリアオブジェクト.select();
テキストエリアオブジェクト.blue();
テキストエリアオブジェクト.select();
メソッドの使用例サンプルを見る
<form action="#">
<p>
<input type="button" value="フォーカスを当てて、テキスト部分を選択" onclick="fFocusSelectDOM()" />
<input type="button" value="フォーカスを外す" onclick="fBlurDOM()" />
</p>
<p><textarea id="taG2">テキストエリアです。</textarea></p>
</form>
<script type="text/javascript">
function fFocusSelectDOM(){
var taObj=document.getElementById("taG2");
taObj.focus();
taObj.select();
}
function fBlurDOM(){
var taObj=document.getElementById("taG2");
taObj.blur();
}
</script>