doctypeを使用する場合xhtml1-transitional.dtd
、次の HTML でクレジット カード番号を収集します。
<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>
W3C バリデーターに警告が表示されます。
「オートコンプリート」という属性はありません。
フォームの機密フィールドでブラウザのオートコンプリートを無効にする W3C / 標準の方法はありますか?
これは、オートコンプリートを形成するための問題(および解決策)を説明するMDCの優れた記事です。Microsoftもここに似たようなものを公開しています。
正直なところ、これがユーザーにとって重要なことである場合は、この方法で標準を「破る」ことが適切であるように思われます。たとえば、Amazonは「オートコンプリート」属性をかなり使用しており、うまく機能しているようです。
警告を完全に削除したい場合は、JavaScriptを使用して、それをサポートするブラウザー(IEとFirefoxが重要なブラウザー)に属性を適用できます。someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );
最後に、サイトでHTTPSを使用している場合、IEは自動的にオートコンプリートをオフにします(私が知る限り、他のブラウザーと同様に)。
アップデート
この回答にはまだかなりの賛成票が寄せられているため、HTML5では、フォーム要素で「オートコンプリート」属性を使用できることを指摘したいと思います。詳細については、W3Cのドキュメントを参照してください。
W3C が (X)HTML4 で動作する方法を提案したとしたら、私は非常に驚かれることでしょう。オートコンプリート機能は完全にブラウザー ベースであり、ここ数年 (HTML4 標準が作成されてからかなり後) に導入されました。
ただし、HTML5 にそれがあったとしても驚くことではありません。
編集:思ったとおり、HTML5にはその機能があります。ページを HTML5 として定義するには、次の doctype を使用します (つまり、これをソース コードの最初のテキストとして配置します)。この標準はまだドラフト段階であるため、すべてのブラウザーがこの標準をサポートしているわけではないことに注意してください。
<!DOCTYPE html>
HTML 4:いいえ
HTML 5:はい
オートコンプリート属性は列挙型の属性です。属性には2つの状態があります。onキーワードはon状態にマップされ、offキーワード はoff状態にマップされます。属性を省略してもかまいません。欠落している値のデフォルトはオン状態です。オフ状態は、デフォルトで、フォームのフォームコントロールの自動入力フィールド名がオフに設定されていることを示します。on状態は、デフォルトで、フォームのフォームコントロールの
autofill
フィールド名が「on」に設定されることを示します。
参照:W3
いいえ。ただし、ブラウザーのオートコンプリートは、name
以前に入力されたフィールドと同じ属性を持つフィールドによってトリガーされることがよくあります。ランダム化されたフィールド名を持つ巧妙な方法を装備できた場合、オートコンプリートは、フィールドに以前に入力された値を取得できなくなります。
入力フィールドにemail_<?= randomNumber() ?>
「email_[some number]
実際には) ブラウザに関係なく、成功が保証されています。
いいえ、良い記事がMozilla Wikiにあります。
私は引き続き無効を使用しますattribute
。これは、プラグマティズムが検証に勝たなければならないところだと思います。
JavaScriptで設定してみてはどうでしょう?
var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false
完璧ではありませんが、HTML は有効になります。
4 種類の入力すべてをキャッチすることをお勧めします。
$('form,input,select,textarea').attr("autocomplete", "off");
参照:
jQuery を使用する場合は、次のようなことができます。
$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});
必要な場所で autocompleteOff クラスを使用します。
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
すべての入力を にしたい場合autocomplete=off
は、単にそれを使用できます:
$(document).ready(function(){$("input").attr("autocomplete","off");});
別の方法 - セキュリティにも役立ちますが、入力ボックスを表示するたびに別のものを呼び出すことです: ちょうどキャプタのように。そうすれば、セッションは 1 回限りの入力を読み取ることができ、オートコンプリートは何も続行しません。
ブラウザ エクスペリエンスに干渉する必要があるかどうかという rmeador の質問に関する 1 つのポイント: 私たちは連絡先管理と CRM システムを開発しています。
これは私たちのニーズには合っていますが、ユーザーにまともなブラウザを入手するように伝える余裕があります:)
autocomplete='off'
autocomplete="off"
これにより、最新のすべてのブラウザーの問題が修正されます。
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
Gecko ブラウザの現在のバージョンでは、オートコンプリート属性は完全に機能します。以前のバージョンでは、Netscape 6.2 に戻り、「住所」と「名前」を含むフォームを除いて機能しました。
アップデート
場合によっては、オートコンプリート属性がオフに設定されていても、ブラウザーはオートコンプリート値を提案し続けます。この予期しない動作は、開発者にとって非常に困惑する可能性があります。オートコンプリートなしを実際に強制する秘訣は、属性にランダムな文字列を割り当てることです。次に例を示します。
autocomplete="nope"
このランダムな値は ではないためvalid one
、ブラウザはあきらめます。
ランダムな「名前」属性を使用するとうまくいきます。
フォームの送信時に name 属性をリセットして、フォームの送信時に名前でアクセスできるようにします。(名前を格納するために id 属性を使用)
autocomplete 属性の場所については混乱があることに注意してください。これは FORM タグ全体または個々の INPUT タグのいずれかに適用できますが、これは実際には HTML5 より前に標準化されていませんでした (明示的に両方の 場所を許可しています)。古いドキュメントで最も注目すべきは、このMozilla の記事で FORM タグのみが言及されていることです。同時に、一部のセキュリティ スキャナは INPUT タグのオートコンプリートのみを検索し、見つからない場合 (親 FORM にある場合でも)に文句を言います。この混乱のより詳細な分析がここに投稿されています: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms。
理想的ではありませんが、レンダリングするたびにテキストボックスの ID と名前を変更できます。データを取得できるように、サーバー側でも追跡する必要があります。
これが機能するかどうかはわかりませんが、ただの考えでした。
もっと簡単な方法があると思います。(javascript を介して) ランダムな名前で非表示の入力を作成し、ユーザー名をそれに設定します。パスワードで繰り返します。このようにして、バックエンド スクリプトは適切なフィールド名が何であるかを正確に認識しながら、オートコンプリートを暗闇で維持します。
私はおそらく間違っていますが、それは単なるアイデアです。
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}
私は2020年にこれを機能させました!
基本的に、入力に -webkit-text-security を適用する css クラスを作成します。
最近の議論へのリンクは次のとおりです: https://stackoverflow.com/a/64471795/8754782
<script type="text/javascript">
/* <![CDATA[ */
document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
/* ]]> */
</script>