HTML DOM 入力タイプ「month」のautofocusプロパティの使い方を解説
HTML DOM の input month（月入力）フィールドにおける autofocus プロパティは、ページが読み込まれた際に、その入力フィールドへ自動的にフォーカスを当てるかどうかを取得・設定するために使用されます。
このプロパティを活用することで、ユーザーがページを開いた瞬間に月の入力欄が選択された状態になり、入力作業をスムーズに開始できるようになります。
構文（Syntax）
autofocus プロパティの基本的な構文は以下のとおりです。
autofocus の値を取得する場合
object.autofocus
autofocus の値を設定する場合
object.autofocus = true | false
- true：ページ読み込み時に自動でフォーカスを当てる
- false：自動フォーカスを無効にする
サンプルコード
それでは、HTML DOM の input month autofocus プロパティの具体的な使用例を見ていきましょう。以下の例では、「Disable」ボタンをクリックすると、月入力フィールドの自動フォーカスが解除されます。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
body{
text-align:center;
}
p{
font-size:1.5rem;
color:#ff8741;
}
input{}
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 Property Example</h1>
<p>Hi! click on disable button to disable autofocus</p>
<input type="month" autofocus value="2019-03">
<br>
<button onclick="disable()">Disable</button>
<script>
function disable() {
document.querySelector("input").autofocus = false;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
初期状態では、autofocus 属性が設定されているため、ページ読み込み時に月入力フィールド（値：2019-03）へフォーカスが当たっています。
ここで「Disable」ボタンをクリックしてみましょう。
ボタンをクリックすると JavaScript の disable() 関数が呼び出され、autofocus プロパティが false に設定されることで、月入力フィールドへの自動フォーカスが無効になります。
まとめ
autofocus プロパティを使えば、JavaScript から動的にフォーカスの挙動を制御できます。フォームのユーザビリティ向上や、特定の条件下でのみ自動フォーカスを有効化したい場合などに活用すると便利です。
-
HTML DOM Input Week の autofocus プロパティの使い方を徹底解説
HTML DOM の Input Week autofocus プロパティは、ページが最初に読み込まれた際に、週入力フィールド（<input type=week>）へ自動的にフォーカスが当たるかどうかを設定・取得するためのプロパティです。フォームの利便性を高めたい場合や、特定の入力欄にユーザーの注意を引きたい場合に活用できます。 構文 autofocus プロパティの基本的な構文は以下のとおりです。 ブール値（true / false）を取得する場合 inputWeekObject.autofocus autofocus を設定する場合 inputWeekObject.autofo
-
HTML DOM パスワード入力フィールドの autofocus プロパティとは？使い方とサンプルコード解説
HTML DOM の autofocus プロパティは、HTML の <input> 要素における autofocus 属性と連動するプロパティです。このプロパティを使用することで、ページが読み込まれた際に、パスワード入力フィールドへ自動的にフォーカス（カーソル移動）するかどうかを設定したり、現在の設定値を取得したりすることができます。構文autofocus プロパティの基本的な使い方は以下の通りです。autofocus プロパティを設定する場合passwordObject.autofocus = true|falseここで true を指定すると、ページ読み込み時にパスワードフィ