Search

Textareaオブジェクト一覧

unknown

メソッド説明
colsテキストエリアの幅を取得・設定
defaultValueテキストエリアのデフォルトテキストを取得・設定
disabledテキストエリアの無効化・有効化を取得・設定
readOnlyテキストエリアを読取専用にするか否かを取得・設定
rowsテキストエリアの高さを取得・設定
typeテキストエリアの型を取得
valueテキストエリアのテキスト部分を取得
メソッド説明
blur()テキストエリアにフォーカスを当てる
focus()テキストエリアからフォーカスを当てる
select()テキストエリアのテキスト部分を選択する

テキストエリアのサイズを変更
cols/rowsプロパティ

unknown

document.Form名.Textarea名.cols = 幅(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)
テキストエリアのサイズを変更(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 = デフォルトテキスト

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();
メソッドの使用例サンプルを見る
<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();
メソッドの使用例サンプルを見る
<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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women