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

HTML DOM Input Date の readOnly プロパティの使い方を徹底解説

HTML DOM の Input Date readOnly プロパティは、日付入力フィールド（<input type="date">）がユーザーによって変更可能かどうかを設定・取得するためのプロパティです。readOnly を true に設定すると、日付の値は表示されるものの、ユーザーは直接編集できなくなります。

構文

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

値を取得する場合（boolean 値を返す：true / false）

inputDateObject.readOnly

値を設定する場合

inputDateObject.readOnly = booleanValue

指定できるブール値

「booleanValue」には、以下のいずれかの値を指定します。

booleanValue説明
true日付入力フィールドを読み取り専用（readOnly）にします。ユーザーは値を変更できません。
false日付入力フィールドを読み取り専用から解除し、ユーザーが自由に編集できる状態にします。

サンプルコード

それでは、Input Date readOnly プロパティの具体的な使用例を見てみましょう。以下の例では、「日付を確定」ボタンをクリックすると、日付フィールドが読み取り専用になり、選択した日付が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Date readOnly</title>
</head>
<body>
<form>
期末試験の日付: <input type="date" id="dateSelect">
</form>
<button onclick="finalizeDate()">日付を確定</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDate = document.getElementById("dateSelect");
   divDisplay.textContent = '試験日の確定状態: '+inputDate.readOnly;
   function finalizeDate() {
      inputDate.readOnly = true;
      divDisplay.textContent = '確定された試験日: '+inputDate.value;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

「日付を確定」ボタンをクリックする前 ― 日付フィールドは編集可能な状態で、現在の readOnly の値（false）が表示されます。

HTML DOM Input Date の readOnly プロパティの使い方を徹底解説

「日付を確定」ボタンをクリックした後 ― 日付フィールドが読み取り専用に切り替わり、選択されていた日付が表示されます。

HTML DOM Input Date の readOnly プロパティの使い方を徹底解説

補足ポイント

  • readOnly と disabled の違い： readOnly は値の変更のみを禁止しますが、フォーム送信時には値がサーバーへ送信されます。一方、disabled に設定されたフィールドは値自体が送信されません。
  • JavaScript からの動的制御： ユーザーの操作や特定の条件に応じて、readOnly プロパティを true / false に切り替えることで、入力フィールドの編集可否を柔軟に制御できます。
  • 主要ブラウザの対応： Chrome、Firefox、Edge、Safari、Opera などの主要ブラウザで Input Date の readOnly プロパティはサポートされています。
  1. HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

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

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

    HTML DOMのTextarea readOnlyプロパティは、HTMLドキュメント内のtextarea（テキストエリア）要素の内容を読み取り専用にするかどうかを、取得および設定するためのプロパティです。readOnlyがtrueに設定されている場合、ユーザーはテキストエリアの内容を編集できなくなります。逆にfalseの場合は、通常どおり自由に入力・編集が可能です。フォームの一時的なロックや、表示専用データの提示などに活用できます。構文（Syntax）readOnlyプロパティの基本的な構文は以下のとおりです。1. readOnlyの値を取得するobject.readOnly2. readO