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

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

HTML DOMのInput FileUpload autofocusプロパティは、ページが最初に読み込まれた際に、ファイルアップロード用の入力欄（<input type="file">）へ自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。

構文

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

値を取得する場合（true / false を返す）

inputFileUploadObject.autofocus

値を設定する場合

inputFileUploadObject.autofocus = booleanValue

設定できるブール値

booleanValueには、以下のいずれかの値を指定します。

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

サンプルコード

ここでは、Input FileUploadのautofocusプロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、自動フォーカスを解除できます。

<!DOCTYPE html>
<html>
<head>
<title>Input FileUpload 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>FileUpload-autofocus</legend>
<label for="FileSelect">アップロード：
<input type="file" id="FileSelect" autofocus>
</label><br>
<input type="button" onclick="removeAutofocus()" value="自動フォーカスを解除">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputFile = document.getElementById("FileSelect");
    divDisplay.textContent = 'Auto Focus: ' + inputFile.autofocus;
    function removeAutofocus() {
        inputFile.autofocus = false;
        divDisplay.textContent = 'Auto Focus: ' + inputFile.autofocus;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

「自動フォーカスを解除」ボタンをクリックする前：

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

初期状態ではautofocusが有効（true）になっているため、ページ読み込み直後にファイル選択欄へフォーカスが当たり、画面には「Auto Focus: true」と表示されます。

「自動フォーカスを解除」ボタンをクリックした後：

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

ボタンをクリックするとJavaScriptによってautofocusがfalseに設定され、表示が「Auto Focus: false」に切り替わります。

まとめ

autofocusプロパティを活用すれば、ユーザーがすぐにファイルを選択できるようになり、フォーム操作の利便性を高められます。HTML属性としてautofocusを記述する方法と、JavaScriptから動的に制御する方法の両方を覚えておくと便利です。

  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