[解決済み】Google Chromeで自動入力を有効にする方法は?
質問
特定のフォームに対して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$"
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] hr要素の色を変更する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】自己署名付きlocalhost証明書をChromeが受け入れるようにする方法
-
[解決済み】ブラウザのオートフィルの検出について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する