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

HTML DOM Input Colorのautofocusプロパティとは？使い方を徹底解説

Input Colorオートフォーカスプロパティの概要

HTML DOM の autofocus プロパティは、<input type="color"> で作成されたカラーピッカー入力フィールドが、ページの初期読み込み時に自動的にフォーカスされるかどうかを設定および取得するために使用されます。

このプロパティを活用することで、ユーザーがページを開いた瞬間に色の選択をすぐに行えるようになり、フォーム操作の利便性を向上させることができます。

構文

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

値を取得する場合

inputColorObject.autofocus

現在の設定状態がブール値（true / false）として返されます。

値を設定する場合

inputColorObject.autofocus = booleanValue

booleanValue に指定できる値

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

booleanValue説明
trueページ読み込み時に入力フィールドへ自動的にフォーカスが当てられます。
falseデフォルト値です。自動フォーカスは行われません。

サンプルコード

ここで、Input Color の autofocus プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Autofocus</title>
</head>
<body>
Color Picker: <input type="color" id="Color" autofocus>
<button onclick="removeAutoFocus()">Remove Auto Focus</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputColor = document.getElementById("Color");
   divDisplay.textContent = 'Autofocus: ' + inputColor.autofocus;
   function removeAutoFocus() {
      if(inputColor.autofocus == true){
         inputColor.autofocus = false;
         divDisplay.textContent = 'Autofocus: ' + inputColor.autofocus;
      }
   }
</script>
</body>
</html>

このコードでは、ページ読み込み時にカラーピッカーへ自動的にフォーカスが当たり、画面には現在の autofocus の状態が表示されます。「Remove Auto Focus」ボタンをクリックすると、autofocus が false に切り替わり、表示内容も更新されます。

実行結果

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

「Remove Auto Focus」ボタンをクリックする前：

HTML DOM Input Colorのautofocusプロパティとは？使い方を徹底解説

「Remove Auto Focus」ボタンをクリックした後：

HTML DOM Input Colorのautofocusプロパティとは？使い方を徹底解説


  1. HTML DOM Input Radio の autofocus プロパティとは？使い方を解説

    HTML DOM Input Radio の autofocus プロパティとはHTML DOM の autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使用することで、ラジオボタン（type=radio）がページの読み込み時に自動的にフォーカスを取得するかどうかを、設定または取得することができます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティの設定：radioObject.autofocus = true|falsetrue を指定するとラジ

  2. HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

    HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru