web-dev-qa-db-ja.com

HTML入力フォームのフィールド候補をオフにする方法は？

提案とは、入力を開始するとドロップダウンメニューが表示されることを意味します。提案は、以前に入力した内容に基づいています。

Example

たとえば、タイトルフィールドに「a」と入力すると、非常に迷惑な大量の候補が表示されます。前もって感謝します。

htmlform-fields
37
Joseph

必要なのは、HTML autocomplete属性を無効にすることです。

ここでautocomplete = "off"を設定すると、2つの効果があります。

ブラウザによって異なるヒューリスティックですが、同様のフォームで後でオートコンプリートするために、ブラウザがフィールドデータを保存するのを停止します。ブラウザがセッション履歴にフォームデータをキャッシュするのを停止します。フォームデータがセッション履歴にキャッシュされると、ユーザーがフォームを送信し、[戻る]ボタンをクリックして元のフォームページに戻ると、ユーザーが入力した情報が表示されます。

MDN Network で詳細を読む

これを行う方法の例を次に示します。

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Reactフレームワーク上にある場合、次のように使用します。

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

react docs へのリンク

更新

「autocomplete = off」フラグをスキップする一部のブラウザを修正するためのアップデートがあります。

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>
44
CodeMonkey

Chromeでは、すべてのフォーム入力を防ぐことができる唯一の方法は、autocomplete="new-password"を使用することでした。オートコンプリートを行うべきではないすべての入力にこれを適用すると、強制されます（フィールドがパスワードと関係がない場合でも、たとえばSomeStateId状態フォームの値を入力します）。 詳細については、Chromiumのバグに関するこのリンクを参照してください 。

これはChromiumベースのブラウザとSafariでのみ一貫して機能することに注意してください。Firefoxにはこのnew-password（ 詳細についてはこの説明を参照 ）用の特別なハンドラーがありません。

更新：Firefoxが登場！Nightly v68.0a1およびBeta v67.0b5（3/27/2019）new-passwordオートコンプリート属性の機能サポート、安定版リリースは5/14/2019に予定されています ロードマップごと 。

7
bsplosion

入力フィールドを次のように変更しました

<textarea style="resize:none;"></textarea>

テキストエリアのオートコンプリートは決して得られません。

2
Peter B

autocomplete="off"属性を使用

引用：重要

属性を<input>要素に配置し、NOT<form>要素に配置します

0
Gigo_G