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

HTML DOM入力検索（Input Search）のautocompleteプロパティとは？使い方を徹底解説

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

構文

autocompleteプロパティを設定する際の基本的な構文は以下の通りです。

searchObject.autocomplete = "on|off"

「on」を設定すると、ブラウザは以前の入力内容をもとにユーザーの入力を自動的に補完します。「off」を設定した場合は、過去の入力に基づく補完は一切行われません。このプロパティのデフォルト値は「on」です。

サンプルコード

それでは、Input Searchのautocompleteプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>上の検索フィールドのオートコンプリートを無効にするには、下のボタンをクリックしてください</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
    function changeAuto() {
        document.getElementById("SEARCH1").autocomplete = "off";
        document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM入力検索（Input Search）のautocompleteプロパティとは？使い方を徹底解説

検索フィールドにテキストを入力すると、以前の入力履歴に基づいてテキストが自動補完されることが確認できます。

HTML DOM入力検索（Input Search）のautocompleteプロパティとは？使い方を徹底解説

「Autocomplete Off」ボタンをクリックすると、以降は自動補完されたテキストが表示されなくなります。

HTML DOM入力検索（Input Search）のautocompleteプロパティとは？使い方を徹底解説

サンプルコードの解説

このサンプルでは、以下のような処理を行っています。

1. 検索フィールドの作成

まず、type="search"、name="fruits"を指定した<input>要素を作成し、autocomplete属性を「on」に設定しています。これにより、以前の入力内容をもとにテキストが自動補完されるようになります。この検索フィールドは、フォームデータをサーバーへ送信するための送信ボタンを含むフォーム内に配置されています。

<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>

2. ボタンの設置

次に、「Autocomplete Off」というボタンを作成しています。このボタンは、ユーザーがクリックするとchangeAuto()メソッドを実行します。

<button onclick="changeAuto()">Autocomplete Off</button>

3. changeAuto()メソッドの処理内容

changeAuto()メソッドでは、getElementById()メソッドを使用してtype="search"の<input>要素を取得し、そのautocomplete属性の値を「off」に設定しています。これにより、以降はテキストが自動補完されなくなり、ユーザーは完全なテキストを手動で入力する必要があります。さらに、innerHTMLプロパティを使って、id「Sample」の段落にこの変更に関するメッセージを表示しています。

function changeAuto() {
    document.getElementById("SEARCH1").autocomplete = "off";
    document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
  1. HTML DOM Input Searchのrequiredプロパティの使い方を解説

    HTML DOMのInput Searchオブジェクトにおけるrequiredプロパティは、<input>要素のrequired属性と連動するプロパティです。フォームがサーバーへ送信される前に、検索フィールドの入力が必須かどうかを設定・取得するために使用されます。このプロパティを利用することで、ユーザーがrequired属性付きの検索フィールドを空欄のままにした場合、フォームの送信を防ぐことができます。構文requiredプロパティの構文は以下の通りです。プロパティの設定searchObject.required = true|falsetrueを指定すると、フォーム送信前に検索フ

  2. 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」を指定すると