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

HTML DOMのinput numberオートフォーカスプロパティとは？使い方を解説

HTML DOMのinput number（数値入力フィールド）のautofocusプロパティは、ページの読み込み時にその入力フィールドへ自動的にフォーカスを当てるかどうかを、取得（参照）および変更（設定）できるプロパティです。

このプロパティは、HTMLのautofocus属性の状態をJavaScriptから操作するためのもので、フォームの利便性を向上させたい場面で活用できます。

構文

基本的な構文は以下の通りです。

1. autofocusの値を取得する

object.autofocus

2. autofocusの値を設定する

object.autofocus = true | false
  • true … ページ読み込み時に自動的にフォーカスを当てる
  • false … 自動フォーカスを無効にする

サンプルコード

それでは、HTML DOMのinput numberオートフォーカスプロパティの具体的な使用例を見ていきましょう。次の例では、ページ読み込み時に数値入力フィールドへ自動フォーカスが設定され、「Disable」ボタンをクリックするとその状態が無効化されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autofocusプロパティの例</title>
<style>
   body{
      text-align:center;
      background-color:#1b203a;
      color:#ff8741;
   }
   p{
      font-size:1.2rem;
   }
   input{
      border:none;
      background-color:#ffffff4a;
      height:1.2rem;
      padding:8px;
      color:#fff;
      font-weight:bold;
      font-size:1rem;
   }
   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:0.5rem;
      border-radius:50px;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>autofocusプロパティの例</h1>
<p>「Disable」ボタンをクリックするとオートフォーカスが無効になります</p>
<input type="number" autofocus value="23450004">
<br>
<button onclick="disable()">Disable</button>
   <script>
      function disable() {
         document.querySelector("input").autofocus = false;
      }
   </script>
</body>
</html>

実行結果

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

HTML DOMのinput numberオートフォーカスプロパティとは？使い方を解説

ページを読み込んだ時点で、数値入力フィールドにカーソル（フォーカス）が当たっているのが確認できます。ここで「Disable」ボタンをクリックすると、JavaScriptによってautofocusプロパティがfalseに設定され、数値入力フィールドの自動フォーカスが無効になります。

HTML DOMのinput numberオートフォーカスプロパティとは？使い方を解説

注意点

  • autofocus属性による自動フォーカスは、基本的にページ読み込み時に評価されます。JavaScriptで後からtrueに変更しても、すでに読み込み済みのページで即座にフォーカスが移動するとは限りません。
  • 1つのページ内でautofocusを指定するのは原則として1つの要素にとどめることが推奨されています。複数の要素に指定した場合、ブラウザによって動作が異なる可能性があります。
  • ユーザーの操作を妨げないよう、アクセシビリティへの配慮も踏まえて適切に使用しましょう。
  1. HTML DOM Input Week の autofocus プロパティの使い方を徹底解説

    HTML DOM の Input Week autofocus プロパティは、ページが最初に読み込まれた際に、週入力フィールド（<input type=week>）へ自動的にフォーカスが当たるかどうかを設定・取得するためのプロパティです。フォームの利便性を高めたい場合や、特定の入力欄にユーザーの注意を引きたい場合に活用できます。 構文 autofocus プロパティの基本的な構文は以下のとおりです。 ブール値（true / false）を取得する場合 inputWeekObject.autofocus autofocus を設定する場合 inputWeekObject.autofo

  2. HTML DOM パスワード入力フィールドの autofocus プロパティとは？使い方とサンプルコード解説

    HTML DOM の autofocus プロパティは、HTML の <input> 要素における autofocus 属性と連動するプロパティです。このプロパティを使用することで、ページが読み込まれた際に、パスワード入力フィールドへ自動的にフォーカス（カーソル移動）するかどうかを設定したり、現在の設定値を取得したりすることができます。構文autofocus プロパティの基本的な使い方は以下の通りです。autofocus プロパティを設定する場合passwordObject.autofocus = true|falseここで true を指定すると、ページ読み込み時にパスワードフィ