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

HTML DOM Input URL autocompleteプロパティの使い方を徹底解説

HTML DOMのInput URL autocompleteプロパティは、URL入力フィールドにおけるオートコンプリート（自動補完）機能の有効・無効を設定したり、現在の状態を取得したりするためのプロパティです。この機能を有効にすると、ユーザーが過去に入力した値が候補として表示されるようになります。

基本情報

autocompleteプロパティは、<input type="url">要素に対して機能し、ブラウザの入力履歴に基づいた補完候補の表示を制御できます。フォームの利便性を高めたい場合や、逆にセキュリティ上の理由で入力履歴を残したくない場合などに活用されます。

構文

値を取得する場合

inputURLObject.autocomplete

戻り値は「on」または「off」の文字列です。

値を設定する場合

inputURLObject.autocomplete = value

設定できる値

「value」には以下のいずれかを指定します。

値説明
onオートコンプリート属性を有効にします。過去に入力された値が候補として表示されます。
offオートコンプリート属性を無効にします。入力候補は表示されません。

サンプルコード

それでは、Input URL autocompleteプロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすることでオートコンプリートを動的に有効化しています。

<!DOCTYPE html>
<html>
<head>
<title>Input URL autocomplete</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-autocomplete</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" placeholder="例: https://www.xyz.com/" autocomplete="off" autofocus>
</label>
<input type="button" onclick="addAutocomplete()" value="候補表示を有効にする">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'Suggestions: '+inputURL.autocomplete;
    function addAutocomplete() {
        inputURL.autocomplete = 'on';
        divDisplay.textContent = 'Suggestions: '+inputURL.autocomplete;
    }
</script>
</body>
</html>

コードの解説

  • 初期状態では、URL入力フィールドにautocomplete="off"が設定されているため、補完候補は無効です。
  • ページ読み込み時に、JavaScriptでinputURL.autocompleteの現在値を取得し、画面に表示します。
  • ボタンをクリックするとaddAutocomplete()関数が実行され、autocompleteプロパティに「on」を代入して補完機能を有効化します。

実行結果

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

「候補表示を有効にする」ボタンをクリックする前：

HTML DOM Input URL autocompleteプロパティの使い方を徹底解説

この時点では「Suggestions: off」と表示され、オートコンプリートが無効であることが確認できます。

「候補表示を有効にする」ボタンをクリックした後：

HTML DOM Input URL autocompleteプロパティの使い方を徹底解説

ボタンをクリックすると「Suggestions: on」と表示が切り替わり、オートコンプリート機能が有効になったことがわかります。

まとめ

Input URL autocompleteプロパティを使えば、JavaScriptから動的にオートコンプリート機能のオン・オフを切り替えることができます。ユーザーの入力負荷を軽減したい場面では「on」を、クレジットカード番号などの機密性の高い情報を扱うフォームでは「off」を指定するなど、用途に応じて適切に設定しましょう。

  1. HTML DOM Input Text autocomplete（オートコンプリート）プロパティの使い方

    HTML DOM の Input Text autocomplete プロパティは、type=text が指定された <input> 要素の autocomplete 属性と連動するプロパティです。この属性には「on」または「off」のいずれかの値を指定でき、「on」を設定すると Web ブラウザはユーザーの過去の入力履歴に基づいてテキストを自動補完します。一方、「off」を設定した場合は自動補完が行われません。 構文 autocomplete プロパティを設定する際の構文は以下のとおりです。 textObject.autocomplete = on|off 「on」を指定すると

  2. HTML DOM URLプロパティとは？使い方とサンプルコードを解説

    HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ