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

HTML DOMのInput Time autofocusプロパティとは?使い方を解説

HTML DOMのInput Time autofocusプロパティは、<input type="time">で作成された時刻入力フィールドに対して、Webページの初回読み込み時に自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。

このプロパティを活用すれば、ユーザーがページを開いた直後にすぐ入力操作を始められるようになり、フォームの利便性向上が期待できます。

構文

autofocusプロパティの構文は以下の通りです。

値の取得(ブール値を返す)

inputTimeObject.autofocus

autofocusの設定

inputTimeObject.autofocus = booleanValue

ブール値の種類

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

booleanValue
説明
true
ページの初回読み込み時に、時刻入力フィールドへ自動的にフォーカスが当たることを示します。
false
デフォルト値です。入力フィールドは自動的にフォーカスされません。

サンプルコード

Input Time autofocusプロパティの具体的な使用例を見てみましょう。この例では、初期状態でautofocusが有効な時刻入力フィールドを用意し、ボタンをクリックするとautofocusが無効化されます。現在のautofocusの状態は画面上にも表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Time autofocus</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-autofocus</legend>
<label for="TimeSelect">Exam Time:
<input type="time" id="TimeSelect" value="10:00" autofocus>
</label>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   divDisplay.textContent = 'Autofocus: '+inputTime.autofocus;
   function removeAutofocus() {
      inputTime.autofocus = false;
      divDisplay.textContent = 'Autofocus: '+inputTime.autofocus;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように表示されます。

「Remove Autofocus」ボタンをクリックする前

HTML DOMのInput Time autofocusプロパティとは?使い方を解説

初期状態ではautofocusプロパティがtrueに設定されているため、「Autofocus: true」と表示され、時刻入力フィールドに自動的にフォーカスが当たっています。

「Remove Autofocus」ボタンをクリックした後

HTML DOMのInput Time autofocusプロパティとは?使い方を解説

ボタンをクリックするとJavaScriptによってautofocusプロパティがfalseに変更され、表示も「Autofocus: false」に切り替わります。このように、autofocusプロパティはJavaScriptから動的に制御することも可能です。

  1. HTML DOMのInput Search autofocusプロパティとは？使い方とサンプルコードを解説

    HTML DOM Input Search autofocusプロパティとは HTML DOMのInput Search autofocusプロパティは、HTMLの<input>要素が持つautofocus属性と連動するプロパティです。このプロパティを利用することで、ページが読み込まれた際に検索入力フィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。 構文 autofocusプロパティを設定する場合の構文は以下のとおりです。 searchObject.autofocus = true|false trueを指定すると検索フィールドにフォーカスが当て

  2. HTML DOM Input Submit autofocusプロパティの使い方を徹底解説

    HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。構文（Syntax）autofocusプロパティの構文は以下の通りです。autofocusプロパティの設定submitObject.autofocus = true|false「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォ