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

HTML5のautocomplete属性で実現するテキスト入力のオートコンプリート

HTML5のautocomplete属性とは

テキスト入力欄にオートコンプリート（自動補完）機能を実装したい場合は、autocomplete属性を使用します。この属性はフォーム要素と組み合わせて指定し、オートコンプリート機能のオン／オフを切り替えることができます。

autocompleteがon（有効）の場合、ブラウザはユーザーが以前そのフィールドに入力した履歴をもとに、候補となる値を自動的に表示します。一方、off（無効）の場合は過去の入力履歴に基づく自動補完が行われず、ユーザーは毎回手動で値を入力する必要があります。

autocomplete属性に指定できる値

autocomplete属性には、以下の2つの値を指定できます。

番号属性値説明
1onデフォルト値です。ブラウザがユーザーの過去の入力履歴に基づいて、値を自動的に補完します。
2offブラウザは過去の入力履歴に基づく自動補完を行いません。ユーザー自身が値を入力する必要があります。

autocomplete属性の使い方（サンプルコード）

以下のコードを実行して、autocomplete属性の動作を確認してみましょう。まず、テキスト入力欄に任意の値を入力して「送信」ボタンをクリックします。その後、同じページを再度読み込み、もう一度フィールドに入力してみてください。入力を始めると、以前入力した値が候補として自動表示されるのが分かります。これはautocompleteがonの場合の動作です。

autocompleteをoffに設定した場合は、過去の入力履歴に基づく自動補完は行われません。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML autocomplete属性</title>
   </head>
   <body>
      <form action = "" method = "get" autocomplete="on">
         詳細情報：<br><br>
         氏名<br><input type="text" name="sname"><br>
         研修週<br><input type="week" name="week"><br>
         <input type="submit" value="送信">
      </form>
   </body>
</html>

なお、autocomplete属性は<form>要素全体に対して一括設定できるほか、個々の<input>要素ごとに個別に指定することも可能です。氏名や住所など利便性が向上する項目では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. テキストの盗用（剽窃）チェックの方法とおすすめツール徹底解説

    剽窃（盗作）は、教師、ライター、編集者など、言葉やアイデアを日々扱う人々にとって昔から付きまとう問題です。インターネットとコピペ機能の普及によって、その傾向はさらに強まっています。剽窃チェッカーと呼ばれるソフトウェアは大きな助けになりますが、すべてのプログラムが大規模なデータベースや正確なアルゴリズムを備えているわけではありません。中には、信頼性の低いサービスが提出されたコンテンツを自社の目的に利用しているケースさえあります。そして、最高のチェッカーであっても100％の検出率を誇ることはできません。とはいえ、剽窃チェックツールがどのような仕組みで動いているのかを理解しておけば、どのツールが使