1. ホーム
  2. html

[解決済み】Google Chromeで自動入力を有効にする方法は?

2022-04-16 14:22:29

質問

特定のフォームに対してChromeの自動入力機能を有効にするための特別なマークアップがあるかどうかを知りたいです。無効にする方法についての質問しか見つけられませんでしたが、ブラウザに "これは住所の入力です" または "これは郵便番号のフィールドです" を伝え、正しく記入するために、html コードに何らかのマークアップを追加できるかどうかを知りたいです (ユーザーがこの機能を有効にしたと仮定します).

解決方法は?

2017年のUPDATEです。 ケイティさんの回答の方が最新の情報を持っているようですね。未来の読者へ:あなたのアップボートを 回答 .

これは素晴らしい質問で、それに関するドキュメントは驚くほど手に入りにくいものです。実際、多くの場合、Chromeの自動入力機能が機能していることがわかります。例えば、次のhtmlのスニペットは、少なくとも私(Chrome v. 18)にとっては、最初のフィールドをクリックした後に自動的に入力されるフォームを生成しています。

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

しかし、この回答は、解決策をマジックに頼っているようで、満足できるものではありません。さらに掘り下げてみると、Chrome(および他の自動入力機能を持つブラウザ)は、フォーム要素に入力すべきデータの種類を決定するのに、主に文脈上の手がかりに依存していることがわかりました。そのような文脈上の手がかりの例として name の入力要素、入力要素の周囲のテキスト、プレースホルダーテキストなどです。

しかし、最近になって、Chromeチームもこれでは不満足であることを認め、この問題の標準化を迫り始めています。 とても参考になる記事 Googleウェブマスターズグループは、最近この問題を取り上げ、次のように説明しています。

<ブロッククオート

残念ながら、これまでウェブマスターがChromeや他のフォーム入力プロバイダーにフォームを正しく解析させることは困難でした。いくつかの標準規格は存在しますが、ウェブサイトの実装に大きな負担をかけるため、実際にはあまり使われていないようです。

(彼らが参照している"standards"は より新しいバージョンの仕様 上記のAvalanchisさんの回答にある通りです)。

Googleの投稿は、彼らの提案する解決策を説明しています(投稿のコメントで重要な批判に応えています)。彼らは、この目的のために新しい属性を使用することを提案しています。

<ブロッククオート

入力要素に属性を追加するだけです。例えば、メールアドレスのフィールドは次のようになります。

<input type=”text” name=”field1” x-autocompletetype=”email” />

...ここで x- はexperimental"を表し、これが標準になった時点で削除される予定です。 読む 投稿 をご覧ください。また、より深く知りたい場合は、提案の完全な説明をご覧ください。 whatwg wikiにあります。 .


UPDATEです。 でご指摘のとおりです。 洞察力 回答 を使用すると、Chrome が共通のフィールドを識別/認識するために使用するすべての正規表現が、以下の場所にあります。 autofill_regex_constants.cc.utf8 . つまり、元の質問に答えるには、htmlフィールドの名前がこれらの式にマッチすることを確認すればよいのです。いくつかの例を挙げます。

  • ファーストネーム "first.*name|initials|fname|first$"
  • ラストネーム "last.*name|lname|surname|last$|secondname|family.*name"
  • 電子メール "e.?mail"
  • のアドレス(1行目)です。 "address.*line|address1|addr1|street"
  • 郵便番号 "zip|postal|post.*code|pcode|^1z$"