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

HTML DOM Input DatetimeLocalのreadOnlyプロパティ徹底解説

Input DatetimeLocal readOnlyプロパティとは

HTML DOMのInput DatetimeLocal readOnlyプロパティは、日時入力フィールド(<input type="datetime-local">)がユーザーによって変更可能かどうかを、設定および取得するためのプロパティです。

このプロパティを活用することで、JavaScriptから動的にフィールドを読み取り専用状態にしたり、現在の状態を確認したりすることができます。なお、readOnlyがtrueの場合でも、フィールドの値はフォーム送信時にはサーバーへ送られる点に注意してください(disabled属性とは異なる挙動です)。

構文

1. 読み取り専用かどうかを取得する(ブール値 true / false を返す)

inputDatetimeLocalObject.readOnly

2. readOnlyにブール値を設定する

inputDatetimeLocalObject.readOnly = booleanValue

ブール値の種類

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

booleanValue説明
truedatetime-local入力フィールドが読み取り専用(編集不可)であることを示します。
falsedatetime-local入力フィールドが読み取り専用ではなく、編集可能であることを示します。

サンプルコード

それでは、Input DatetimeLocal readOnlyプロパティの具体的な使用例を見てみましょう。以下の例では、「Confirm Slot(スロット確定)」ボタンをクリックすると、日時フィールドが読み取り専用に切り替わります。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal readOnly</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-readOnly</legend>
<label for="datetimeLocalSelect">Examination Slot :
<input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45">
</label>
<input type="button" onclick="confirmSlotBooking()" value="Confirm Slot">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    divDisplay.textContent = 'Slot Confirmed: '+inputDatetimeLocal.readOnly;
    function confirmSlotBooking() {
        inputDatetimeLocal.readOnly = true;
        divDisplay.textContent = 'Slot Confirmed: '+inputDatetimeLocal.readOnly+', Your Slot: '+inputDatetimeLocal.value;
    }
</script>
</body>
</html>

実行結果

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

「Confirm Slot」ボタンをクリックする前

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

HTML DOM Input DatetimeLocalのreadOnlyプロパティ徹底解説

「Confirm Slot」ボタンをクリックした後

ボタンをクリックすると、JavaScriptによってreadOnlyプロパティが「true」に設定され、表示内容が更新されます。同時に、確定された日時の値もあわせて表示されます。

HTML DOM Input DatetimeLocalのreadOnlyプロパティ徹底解説

まとめ

  • readOnlyプロパティを使うと、datetime-localフィールドの編集可否をJavaScriptから制御できます。
  • 値の取得にはブール値(true/false)が返されます。
  • trueに設定すると読み取り専用になりますが、フォーム送信時には値がサーバーに送信されます。
  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