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

HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説

HTML DOM の readOnly プロパティは、テキスト入力フィールド（input type="text"）が読み取り専用かどうかを設定・取得するために使用されるプロパティです。

readOnly を true に設定すると、その要素はユーザーによって編集できなくなります。ただし、読み取り専用の要素であっても、Tab キーやクリックによるフォーカスは可能です。また、readonly 属性が設定された要素に初期値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。これは disabled 属性との大きな違いであり、disabled では値が送信されない点に注意が必要です。

構文

readOnly プロパティを設定する場合の構文は以下のとおりです。

textObject.readOnly = true|false

true を指定するとテキストフィールドは読み取り専用になり、false を指定すると編集可能な状態になります。このプロパティのデフォルト値は false です。

なお、現在の設定状態を取得したい場合は、以下のようにプロパティを読み出すだけで確認できます。

let state = textObject.readOnly;

サンプルコード

ここでは、Input Text の readOnly プロパティを使った具体的な例を見ていきましょう。ボタンをクリックすると、テキストフィールドが読み取り専用に切り替わるシンプルなデモです。

<!DOCTYPE html>
<html>
<body>
<h1>Input Text readOnly property</h1>
USERNAME: <input type="text" id="USR">
<p>下のボタンをクリックすると、上のフィールドの readOnly プロパティが変更されます</p>
<button onclick="changeRead()">CHANGE</button>
<script>
    function changeRead() {
        document.getElementById("USR").readOnly = true;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説

「CHANGE」ボタンをクリックすると、JavaScript によって readOnly プロパティが true に設定され、テキストフィールドが編集不可の状態になります。ユーザーは文字を変更できませんが、フォーム送信時にはフィールド内の値がサーバーへ送られます。

HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説

まとめ

readOnly プロパティを使えば、JavaScript から動的にテキスト入力欄の編集可否を制御できます。「値は表示しつつ編集はさせたくない」「サーバーには値を送りたい」といったケースで特に有効です。disabled 属性との違い（フォーカスの可否や値の送信）を理解して、用途に応じて使い分けましょう。

  1. HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。構文maxLengthプロパティの基本的な構文は以下の通りです。maxLengthプロパティの設定textObject.maxLength = integerここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場

  2. HTML DOMのInput Text formプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ