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

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

Input Time readOnlyプロパティとは

HTML DOMのInput Time readOnlyプロパティは、時間入力フィールド（<input type="time">）がユーザーによって変更可能かどうかを設定・取得するためのプロパティです。このプロパティを利用することで、JavaScriptから動的にフィールドの読み取り専用状態を制御できます。

構文

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

値の取得（boolean値を返す）

inputTimeObject.readOnly

値の設定（booleanValueを代入）

inputTimeObject.readOnly = booleanValue

設定できるboolean値

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

booleanValue説明
true時間入力フィールドが読み取り専用（readOnly）であることを示します。
false時間入力フィールドが読み取り専用ではなく、ユーザーが編集可能であることを示します。

サンプルコード

Input Time readOnlyプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>Time-readOnly</legend>
<label for="TimeSelect">上司との面談時刻：</label>
<input type="time" id="TimeSelect" value="12:45" readOnly>
<input type="button" onclick="changeMeeting()" value="Edit Time">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    function changeMeeting() {
        if(inputTime.readOnly === true)
            divDisplay.textContent = 'The meeting time cannot be altered';
        else
            divDisplay.textContent = 'The meeting time fixed at: '+inputTime.value;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような動作になります。

「Edit Time」ボタンをクリックする前：

時間フィールドにはreadOnly属性が設定されているため、初期状態では「12:45」の時刻を変更できません。ボタンをクリックすると、「The meeting time cannot be altered（面談時刻は変更できません）」というメッセージが表示されます。

「Edit Time」ボタンをクリックした後：

readOnly状態が判定され、フィールドが読み取り専用であるため、時刻を編集しようとしても変更できないことがメッセージで通知されます。

readOnlyプロパティのポイント

  • readOnlyプロパティは、JavaScriptのブール値（true/false）として取得・設定が可能です。
  • HTMLのreadOnly属性を付与しておくと、初期状態で読み取り専用になります。
  • disabled属性と異なり、readOnlyのフィールドはフォーム送信時に値がサーバーへ送信されます。
  • ユーザーに値を表示しつつ、誤って編集させたくない場合に便利です。
  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はパスワードフィールドが読み取り専用で