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

HTML DOM の input number readOnly プロパティとは？構文と使い方を解説

HTML DOM の input number readOnly プロパティは、HTML ドキュメント内の数値入力フィールド（<input type="number">）が読み取り専用かどうかを取得・変更するためのプロパティです。

このプロパティはブール値（true / false）を扱います。true を設定するとフィールドは読み取り専用になり、ユーザーは値を編集できなくなります。false を設定すれば、通常どおり編集可能な状態へ戻せます。

構文

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

readOnly の値を取得する場合

object.readOnly

readOnly の値を変更する場合

object.readOnly = true | false
  • true … 数値入力フィールドを読み取り専用にする
  • false … 数値入力フィールドを編集可能にする

サンプルコード

それでは、input number readOnly プロパティの具体的な使用例を見てみましょう。ボタンをクリックすることで、JavaScript から入力フィールドの編集可否を動的に切り替えています。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
        outline:none;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>DOM Input number readOnly property Demo</h1>
<p>Hi, Select your day of birth?</p>
<input type="number" class="numberInput">
<button onclick="rFunction()" class="btn">Read Only</button>
<button onclick="rWFunction()" class="btn">Read &amp; Write</button>
    <script>
        function rFunction() {
            var monthInput = document.querySelector(".numberInput");
            monthInput.readOnly =true;
        }
        function rWFunction(){
            var monthInput = document.querySelector(".numberInput");
            monthInput.readOnly =false;
        }
    </script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

HTML DOM の input number readOnly プロパティとは？構文と使い方を解説

まず「Read Only」ボタンをクリックしてみてください。readOnly プロパティに true が設定され、数値入力フィールドが読み取り専用になるため、値を入力できなくなります。

HTML DOM の input number readOnly プロパティとは？構文と使い方を解説


続いて「Read & Write」ボタンをクリックすると、readOnly プロパティに false が設定され、再び編集可能な状態に戻ります。

HTML DOM の input number readOnly プロパティとは？構文と使い方を解説

このように readOnly プロパティを活用すれば、フォームの送信済みデータの保護や、特定の条件でのみ入力を許可する UI など、柔軟な入力制御を実現できます。なお、readOnly は見た目上は通常の入力欄と変わらないため、無効化してグレーアウト表示したい場合は disabled 属性を使うのが適しています。

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

    HTML DOM の readOnly プロパティは、テキスト入力フィールド（input type=text）が読み取り専用かどうかを設定・取得するために使用されるプロパティです。 readOnly を true に設定すると、その要素はユーザーによって編集できなくなります。ただし、読み取り専用の要素であっても、Tab キーやクリックによるフォーカスは可能です。また、readonly 属性が設定された要素に初期値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。これは disabled 属性との大きな違いであり、disabled では値が送信されない点に注意が必要です。 構

  2. HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

    HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。 構文 readOnlyプロパティを設定する構文は以下の通りです。 passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用で