質問: chromeの自動入力を無効にする 私はいくつかのフォームでchrome autofillの振る舞いに関する問題に遭遇しました。フォーム内のフィールドはすべて、 "email"、 "name"、 "password"など、非常に一般的で正確な名前を持ち、さらにautocomplete="off"セットもあります。オートコンプリートフラグは、入力を開始すると値のドロップダウンが表示されるオートコンプリートの動作を無効にしましたが、chromeがフィールドに自動入力する値は変更されていません。クロムが入力を誤って入力していることを除いて、この動作は問題ありません。たとえば、電話入力を電子メールアドレスで入力している場合などです。顧客はこれについて不満を言っていたので、それは複数のケースで起こることが確認されており、私が自分のマシン上でローカルに行ったことの何らかの結果としてではありません。私が考えることができる唯一の現在の解決策は、カスタム入力名を動的に生成してからバックエンドで値を抽出することですが、これはこの問題を回避するためのかなり厄介な方法のように思えます。これを修正するために使用される可能性があるオートフィルの動作を変更するタグや癖がありますか?
回答: 時にはautocomplete=offでも資格情報を間違ったフィールドに記入するのを妨げないことがあります。これを回避するには、readonly-modeを使用してブラウザのオートフィルを無効にし、書き込み可能をフォーカスに設定します。 <input type="password" readonly onfocus="this.removeattribute('readonly');"/> focusイベントはマウスクリックとフィールドのタブ移動で発生します。更新:mobile safariはフィールドにカーソルを設定しますが、仮想キーボードを表示しません。この新しい回避策は以前と同じように機能しますが、仮想キーボードを処理します。<input id="email" readonly type="email" onfocus="if (this.hasattribute('readonly')) { this.removeattribute('readonly'); // fix for mobile safari to show virtual keyboard this.blur(); this.focus(); }" /> ライブデモ https://jsfiddle.net/danielsuess/n0scguv6/ /// updateend 説明: ブラウザが資格情報を間違ったテキストフィールドに自動入力しますか? 電話入力に電子メールアドレスを入力するなど、入力を誤って入力する 同じ形式にパスワードフィールドがあると、chromeとsafariでこの奇妙な動作に気付くことがあります。それから autofills usernameを最も近いtextlike-inputフィールドに入力します。これはdomのパスワードフィールド の前に現れます(単に観察のために推測される)ブラウザが最後のインスタンスであり、あなたはそれを制御することはできませんので、上のこのreadonly-fixは私のために働きました。