HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM TextareaのreadOnlyプロパティとは？使い方とサンプルコードを解説

HTML DOMのTextarea readOnlyプロパティは、HTMLドキュメント内のtextarea（テキストエリア）要素の内容を読み取り専用にするかどうかを、取得および設定するためのプロパティです。

readOnlyがtrueに設定されている場合、ユーザーはテキストエリアの内容を編集できなくなります。逆にfalseの場合は、通常どおり自由に入力・編集が可能です。フォームの一時的なロックや、表示専用データの提示などに活用できます。

構文（Syntax）

readOnlyプロパティの基本的な構文は以下のとおりです。

1. readOnlyの値を取得する

object.readOnly

2. readOnlyの値を設定する

object.readOnly = true | false

それでは、実際にHTML DOM Textarea readOnlyプロパティを使った例を見てみましょう。

サンプルコード（Example）

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
<body>
<h1>DOM Textarea readOnly Property Demo</h1>
<textarea rows="5" cols='20' name="I'm name attribute of textarea element">
Hi! I'm a text area element with some dummy text.
</textarea>
<button onclick="set()" class="btn">Toggle Read Only</button>
<script>
    function set() {
        var ta = document.querySelector("textarea");
        if (ta.readOnly === true) {
            ta.readOnly = false;
        } else {
            ta.readOnly = true;
        }
    }
</script>
</body>
</html>

実行結果（Output）

このコードをブラウザで開くと、テキストエリアと「Toggle Read Only」ボタンが表示されます。

ボタンをクリックするたびに、textarea要素のreadOnly属性の値がtrue⇔falseと切り替わります。readOnlyが有効になっている状態では、テキストエリア内の文字列を選択することはできますが、編集・入力はできなくなります。

このように、readOnlyプロパティをJavaScriptから動的に操作することで、ユーザーの操作状況に応じてフォームの入力可否を柔軟に制御することが可能です。

  1. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma

  2. HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説

    HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir