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

HTML DOM Input Datetime の readOnly プロパティとは？使い方をわかりやすく解説

HTML DOM の Input Datetime オブジェクトにおける readOnly プロパティは、日時入力フィールド（<input type="datetime">）がユーザーによって編集可能かどうかを取得・設定するためのプロパティです。

このプロパティを使うことで、JavaScript から動的にフォームの日時項目を読み取り専用にしたり、編集可能な状態に戻したりすることができます。読み取り専用にされたフィールドは、ユーザーが値を変更できなくなりますが、フォーム送信時には値がサーバーへ送られる点に注意してください（disabled 属性と異なる点です）。

構文

readOnly プロパティの値を取得する場合

真偽値（true / false）が返されます。

inputDatetimeObject.readOnly

readOnly プロパティの値を設定する場合

inputDatetimeObject.readOnly = booleanValue

booleanValue に指定できる値

booleanValue説明
true日時入力フィールドを読み取り専用にします。ユーザーは値を変更できません。
false日時入力フィールドを編集可能な状態にします（デフォルトの状態です）。

Input Datetime readOnly プロパティの使用例

以下は、ボタンをクリックすると日時入力フィールドを読み取り専用にするサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly</title>
</head>
<body>
<form>
最終試験の日時: <input type="datetime" id="datetimeSelect" value="2023-08-24T10:30Z">
</form>
<button onclick="finalizeDatetime()">日時を確定する</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetime = document.getElementById("datetimeSelect");
   divDisplay.textContent = '試験日時の確定状態: '+inputDatetime.readOnly;
   function finalizeDatetime() {
      inputDatetime.readOnly = true;
      divDisplay.textContent = '確定された試験日時: '+inputDatetime.value;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような出力が得られます。

「日時を確定する」ボタンをクリックする前

ページ読み込み直後は、readOnly プロパティの初期値である false が画面に表示され、日時フィールドは自由に編集できる状態になっています。

HTML DOM Input Datetime の readOnly プロパティとは？使い方をわかりやすく解説

「日時を確定する」ボタンをクリックした後

ボタンをクリックすると readOnly プロパティが true に設定され、日時入力フィールドが読み取り専用になります。これにより、ユーザーはそれ以上値を変更できなくなります。

HTML DOM Input Datetime の readOnly プロパティとは？使い方をわかりやすく解説

まとめ

Input Datetime の readOnly プロパティを活用すれば、ユーザーに入力させた日時を「確定」させる場面などで、誤って値が変更されるのを防ぐことができます。true / false の真偽値で簡単に制御できるため、フォームの操作性を高めたいときにぜひ活用してみてください。

  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