web-dev-qa-db-ja.com

オートコンプリートテキスト入力

多くのJavaScriptソリューションがあることは知っていますが、オートコンプリートを使用してテキスト入力を行うHTML5メソッドはありますか？ datalist要素は、リストの内容に制限するのではなく、カスタム値を入力できることを除いて、ほとんど私が求めているものです。

html5formsautocomplete
29
Evanss

HTML5には、フィールドでautocompleteまたはonとして指定できるoff属性があります。

以下に例を示します。

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

仕組みは、最初に送信する値が、各フィールドのkeyupでこのページにアクセスしたときに、提案されることです。

  • この機能の使用を決定する際のkeyの問題は、ブラウザーの互換性の1つです。最善の策は、複数のブラウザーをチェックして、機能することを確認することです。 caniuse.com は、サポートの外観がかなり悪いように見えますが、現代のブラウザを持っている人を助けるためにそれを使用しても、何の害もありません。

W3Schools からのautocompleteに関するその他のファクトイドは、基本をカバーしているため、この場合は嫌いではありません。

  • オートコンプリートがオンの場合、ブラウザはユーザーが以前に入力した値に基づいて値を自動的に補完します。
  • フォームのオートコンプリートを「オン」にし、特定の入力フィールドを「オフ」にする、またはその逆を行うことができます。
  • オートコンプリート属性は、テキスト、検索、URL、電話番号、電子メール、パスワード、日付ピッカー、範囲、および色で機能します。
14
tim peterson

datalist要素を試してください。 W3C HTML5勧告 で明確に定義されており、おそらく現在および近い将来の机上で最良のオプションです。

Datalist要素は、input要素のlist属性を使用して input 要素に接続されます。

Datalist要素の子孫であり、無効になっておらず、値が空の文字列ではない文字列である各オプション要素は、提案を表します。各提案には、 値 と ラベル があります。

Google chrome and chromium v21.x以降のベースのブラウザはこれをサポートしています（2014年12月現在、現在のバージョンは39です。 他のブラウザはこちら ）FirefoxおよびOperaも長期間サポートしています。 Modern（！）IEバージョンデータリストを部分的にサポート）.

デモ：すばらしい 作業データリストの実装 北村英二。

Polyfill： RelevantDropdown も確認してください。 jQueryとModernizrに依存するHTML5データリストポリフィルです。

この例を実行してみてください。

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3リファレンス： https://www.w3.org/TR/html5/forms.html#the-datalist-element

57
edigu

この質問はかなり古いですが、2017年の更新された回答があります！

オートコンプリートを有効にするための公式current WHATWG HTML Standardへのリンクです。

次の回答は、ここからの元の回答からです： https://stackoverflow.com/a/41965106/1696153

オートコンプリートをトリガーするには、inputタグに正しい名前を付けるだけです。

Googleは、モバイルデバイスに優しいWebアプリケーションを開発するための かなり素敵なガイド を作成しました。自動入力を簡単に使用できるように、フォームの入力に名前を付ける方法に関するセクションがあります。それはモバイル用に書かれていますが、これはデスクトップとモバイルの両方に適用されます！

HTMLフォームでオートコンプリートを有効にする方法

オートコンプリートを有効にする方法に関する重要なポイントを次に示します。

  • <label>フィールドすべてに<input>を使用
  • autocomplete属性を追加を<input>タグに追加し、この ガイド を使用して入力します。
  • すべての<input>タグのnameおよびautocomplete属性に正しく名前を付けてください

  • 例：

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

<input>タグに名前を付ける方法

オートコンプリートをトリガーするには、<input>タグのnameおよびautocomplete属性に正しく名前を付けてください。これにより、フォームのオートコンプリートが自動的に許可されます。必ず<label>！も用意してください！この情報は、 here にもあります。

入力に名前を付ける方法は次のとおりです。

  • 名前
    • nameには次のいずれかを使用します：name fname mname lname
    • autocomplete：にはこれらのいずれかを使用します
      • name（フルネーム）
      • given-name（名）
      • additional-name（ミドルネーム用）
      • family-name（姓）
    • 例：<input type="text" name="fname" autocomplete="given-name">
  • Email
    • nameには次のいずれかを使用します：email
    • autocompleteには次のいずれかを使用します：email
    • 例：<input type="text" name="email" autocomplete="email">
  • アドレス
    • nameには次のいずれかを使用します：address city region province state Zip zip2 postal country
    • autocomplete：にはこれらのいずれかを使用します
      • 1つの住所入力の場合：
        • street-address
      • 2つの住所入力の場合：
        • address-line1
        • address-line2
      • address-level1（州または県）
      • address-level2（都市）
      • postal-code（郵便番号）
      • country
  • 電話番号
    • nameには次のいずれかを使用します：phone mobile country-code area-code exchange suffix ext
    • autocompleteには次のいずれかを使用します：tel
  • クレジットカード
    • nameには次のいずれかを使用します：ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • autocomplete：にはこれらのいずれかを使用します
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • ユーザー名
    • nameには次のいずれかを使用します：username
    • autocompleteには次のいずれかを使用します：username
  • パスワード
    • nameには次のいずれかを使用します：password
    • autocomplete：にはこれらのいずれかを使用します
      • current-password（サインインフォーム用）
      • new-password（サインアップおよびパスワード変更フォーム用）

資源

10
Katie

HTML5を使用すると、Javascriptを使用せずに、Googleサジェストスタイルのオートコンプリート入力が可能になります。

この記事を参照してください： HTML5スタイルの「Google Suggest」

ただし、まだ十分にサポートされていません。この記事の例は、現時点ではOperaでのみ機能します。

現時点では、 Autocomplete ウィジェットを備えたJQuery UIなどの幅広いブラウザーサポートを備えた十分にテストされたライブラリを使用するのがおそらく最善です。

3
DanO

このMSDNガイドに従って、データリスト入力を強制し、データリストのオプションに一致するテキストのみを許可しました。 HTML Contstraint Validation APIを活用します。

http://msdn.Microsoft.com/en-us/magazine/dn133614.aspx

0
user2751200