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

HTML DOM Input WeekのreadOnlyプロパティとは？設定・取得方法を解説

HTML DOMのInput Week readOnlyプロパティは、週（week）入力フィールドがユーザーによって変更可能かどうかを設定・取得するためのプロパティです。このプロパティを活用することで、JavaScriptから動的にフィールドを読み取り専用状態にしたり、現在の状態を確認したりすることができます。

構文

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

値を取得する場合（真偽値 true/false を返す）

inputWeekObject.readOnly

値を設定する場合

inputWeekObject.readOnly = booleanValue

booleanValueに指定できる値

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

booleanValue説明
true週入力フィールドを読み取り専用（readOnly）にします。ユーザーは値を変更できません。
false週入力フィールドを読み取り専用にしません。ユーザーは値を自由に変更できます。

サンプルコード

ここでは、Input Week readOnlyプロパティの具体的な使用例を見ていきましょう。ボタンをクリックすると、週入力フィールドが読み取り専用に切り替わるサンプルです。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-readOnly</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="confirmWeek()" value="Confirm Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputWeek = document.getElementById("WeekSelect");
   divDisplay.textContent = 'Week Confirmed: '+inputWeek.readOnly;
   function confirmWeek() {
      inputWeek.readOnly = true;
      divDisplay.textContent = 'Week Confirmed: '+inputWeek.readOnly;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような表示になります。

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

ページ読み込み時点では、readOnlyプロパティはfalse（変更可能な状態）であるため、「Week Confirmed: false」と表示されます。

HTML DOM Input WeekのreadOnlyプロパティとは？設定・取得方法を解説

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

ボタンをクリックすると、confirmWeek()関数が実行され、readOnlyプロパティがtrueに設定されます。その結果、週入力フィールドは読み取り専用となり、ユーザーは値を変更できなくなります。表示も「Week Confirmed: true」に切り替わります。

HTML DOM Input WeekのreadOnlyプロパティとは？設定・取得方法を解説

まとめ

readOnlyプロパティを使えば、週入力フィールドの編集可否をJavaScriptから簡単に制御できます。フォームの確認画面など、ユーザーに値の変更をさせたくない場面で非常に便利なプロパティです。なお、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はパスワードフィールドが読み取り専用で