web-dev-qa-db-ja.com

登録フォームのブラウザにフィールドが事前入力されないようにするにはどうすればよいですか?

autocomplete="off"は私が求めているものではありません。基本的に、私の登録フォームには、「電話」と「パスワード」のフィールドが上下に配置されています。 (スクリーンショットを参照)

ブラウザーが何をしているのかと思いますが、「電話」フィールドにはユーザー名があらかじめ入力されています。ブラウザはパスワードタイプのフィールドを検出し、テキスト入力フィールドをユーザー名フィールドの直前と見なします。効果は次のとおりです。

registration form snapshot

電話フィールドの非標準のオートコンプリート属性に興味がないのは、ユーザーがこのフォームにできるだけ簡単に入力できるようにし、以前に他のサイトで電話番号を入力した場合(というフィールドに) 「電話」)フィールドに入力し始めると、これが表示されることから利益を得ることができます。そのため、オートコンプリートを完全にオフにしたくありません。

私はこの振る舞いを避けるために、どういうわけかフィールドを再編成する方向でもっと考えていました。または、パスワードフィールドの上のフィールドはそれとは何の関係もないこと、またはパスワードフィールドが認証目的で使用されないことをブラウザに伝える何らかの方法です。どういうわけかそれをマークします。または、これら2つのフィールドの間にいくつかの非表示要素を挿入しますか?

何か案は?

使用されるマークアップ:

<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">

私はこの動作をChrome FFで取得しています(IEについては不明ですが、私のマシンで古いバージョンを取得しています。IE)についてはまだ心配したくありません。)

35
Peter Perháč

ほとんどのパスワードマネージャは、最初のパスワードフィールドと、その前の最も近いテキストフィールドを検索します。

だからあなたがしなければならないすべては不可視のテキストとパスワードフィールド(display:none)上記の「新しいパスワード」。

Firefox つのパスワードフィールドを解釈しようとします は「パスワードの変更」アクションとして機能するため、安全にしたくない場合は、別の非表示のパスワードフィールドを安全に追加できます。

30

パスワード設定フィールドで同様の問題がありました。試す

<input type="password" autocomplete="new-password">

MDNから input ドキュメント:

オートコンプリート

この属性は、コントロールの値がブラウザによって自動的に完了することができるかどうかを示します。

可能な値は次のとおりです。

.... new-password:新しいパスワード(例:アカウントの作成時またはパスワードの変更時)

電話番号の問題については、これを設定すると、そこでユーザー名のオートコンプリートが停止しました。

<input type="tel">
11
do what now

自宅の電話番号を30文字にすることはできません。これが、サイズが原因でユーザー名またはログイン用のメールアドレスであるとブラウザが想定している理由です。それを現実的なものに変更し、何が起こるかを確認してください。

また、電話番号、市外局番、プレフィックス、サフィックスの3つのフィールドがあることを検討してください。一定の桁数が入力されると、JavaScriptを使用して次の電話セグメントフィールドをオートフォーカスできるため、ユーザーが簡単に使用できます。

フィールドの位置を変更してみましたか?何が起こったか?

また、念のため、登録時に特定のアイテムのオートコンプリートをオフにすることもできます。ログインフィールドでもオフにしない限り、ログイン中にオフになることを心配する必要はありません。する必要はありません。

また、未使用の保存済みフォームのオートコンプリートを削除します。バージョンのローカルな問題である可能性があります。いずれかのブラウザーに誤った値を入力し、他のブラウザー(クロムまたはFF)をインストールした可能性があります。次に、新しくインストールされたブラウザは、元のブラウザとまったく同じようにルールをコピーしました。つまり、1つの不正なエントリと、2番目にインストールされたブラウザがあなたの最初のブラウザからの不正な入力ルール、それはあなたにとって本当の普遍的な問題のように見えます、私を取得しますか?そのため、ブラウザーをInPrivateモードで試すか、別のインストールまたは別のコンピューターから、あるいはお持ちのvirtualpcインスタンスからブラウザーを試してください。

それ以外の場合は、ブラウザからすべての設定をエクスポートし、両方のブラウザをアンインストールしてから、FFとchromeを最初から再インストールし、Webページをテストして、エクスポートした設定をインポートしてください。

また、IEでテストしてください。たとえそれがあなたに与えるかもしれない洞察のためであっても、私が何を意味するのか知っていますか?

これがお役に立てば幸いです。乗り方、および他に質問がある場合はお知らせください。

更新:

選択したメソッドが与えられた場合、実行できることは、電話フィールドをレンダリングするときに、JavaScriptを使用する代わりに、値= ""属性を入力タグに追加することです。これにより、JavaScriptを使用せずに事前入力が行われるのを防ぐことができます。今、あなたが一歩先に行きたいなら、あなたはこれを行うことができます:

ページの読み込み時のOnLoadイベント中に、JavaScriptを使用して電話フィールドを確認し、値が1つのスペース( "")に等しい場合は、onLoadがトリガーされたらJavaScriptを使用して空の文字列で上書きします。または、ブラウザーがまだ事前入力している場合(疑わしいでしょうが、そうである場合)、このチェックを数百ミリ秒遅らせて、ページがロードされてから数百ミリ秒後にJavaScriptを実行するか、またはすべてまたは一部に関連付けることができます。入力フィールドのonFocusイベント。い​​ずれかのフィールドがフォーカスを取得するとすぐに、「does phone.value equals one space character( "")」を実行します。一致する場合は、空の文字列で上書きします。この状況では、ブラウザーがジャンプしてそのフィールドをハイジャックしないことを確認します。前述のように、これをonLoadしても、ブラウザーがフィールドをハイジャックすることはないと思います。 onLoad(DocumentComplete)イベントが発生し、最悪のシナリオでは、数百ミリ秒のラグまたはonFocusメソッドを実行できますが、これらが必要になるとは思いません。

どうなるか教えてください。

2

DOMの読み込み後に入力フィールドtype = text&type = passwordを無効にしてから、特定のミリ秒後に100と言ってすべての無効なフィールドを有効にしてみました。これは私にとってはうまくいくようです。試してください:

$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');

$("body").delay(10,function(){
    $("input[type=text],input[type=password]").prop('disabled','');
    });
});
1
user2286550