HTML DOM Input URLのautofocusプロパティ徹底解説！構文から実用例まで
HTML DOM Input URL autofocusプロパティとは
autofocusプロパティは、HTML DOMにおいてURL入力フィールド（<input type="url">）が、ページの初期読み込み時に自動的にフォーカスされるかどうかを取得・設定するためのプロパティです。このプロパティを活用すれば、ページを開いた瞬間にユーザーがすぐURLを入力できる状態を作れるため、フォームの利便性向上につながります。
なお、JavaScriptで後からautofocus = falseとしても、すでに当たっているフォーカス自体は外れません。あくまで「初期読み込み時にフォーカスを当てるかどうか」の属性値を操作するものなので、注意しましょう。
構文
autofocusプロパティの基本構文は次の通りです。
値の取得（boolean値： true / false を返す）
inputURLObject.autofocus
値の設定（booleanValue を代入する）
inputURLObject.autofocus = booleanValue
ブール値の一覧
booleanValueには、以下のいずれかの値を指定します。
| booleanValue | 説明 |
|---|---|
| true | ページ読み込み時に入力フィールドへ自動的にフォーカスが当たることを示します。 |
| false | デフォルト値です。入力フィールドは自動的にフォーカスされません。 |
使用例
それでは、Input URL autofocusプロパティの具体的な使用例を見てみましょう。このサンプルでは、初期状態でautofocusが有効になっているURL入力欄に対し、ボタンをクリックするとautofocusが無効化される仕組みを実装しています。
<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-autofocus</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" placeholder="https://www.google.com" autofocus>
</label>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
divDisplay.textContent = 'Autofocus: '+inputURL.autofocus;
function removeAutofocus() {
inputURL.autofocus = false;
divDisplay.textContent = 'Autofocus: '+inputURL.autofocus;
}
</script>
</body>
</html>出力結果
上記コードを実行すると、以下のように表示されます。
「Remove Autofocus」ボタンをクリックする前：
ページ読み込み直後にURL入力欄へフォーカスが当たり、表示には「Autofocus: true」と出力されます。
「Remove Autofocus」ボタンをクリックした後：
ボタンを押すことでautofucus属性がfalseに変更され、表示が「Autofocus: false」に切り替わります。
-
HTML DOMのInput Search autofocusプロパティとは？使い方とサンプルコードを解説
HTML DOM Input Search autofocusプロパティとは HTML DOMのInput Search autofocusプロパティは、HTMLの<input>要素が持つautofocus属性と連動するプロパティです。このプロパティを利用することで、ページが読み込まれた際に検索入力フィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。 構文 autofocusプロパティを設定する場合の構文は以下のとおりです。 searchObject.autofocus = true|false trueを指定すると検索フィールドにフォーカスが当て
-
HTML DOM Input Submit autofocusプロパティの使い方を徹底解説
HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。構文（Syntax）autofocusプロパティの構文は以下の通りです。autofocusプロパティの設定submitObject.autofocus = true|false「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォ