ホームページ > ウェブフロントエンド > htmlチュートリアル > パスワードを記憶すると、パスワード ボックスのパスワードが自動的に data_html/css_WEB-ITnose を表示します。

パスワードを記憶すると、パスワード ボックスのパスワードが自動的に data_html/css_WEB-ITnose を表示します。

WBOY
リリース: 2016-06-21 08:58:10
オリジナル
1570 人が閲覧しました

通常、ログイン後、ブラウザーはパスワードを記憶するかどうかを尋ねます。ブラウザーでパスワードを覚えている場合、ブラウザーは次回ログイン ページにユーザー名とパスワードを自動的に入力します。ログインします。少し前にサービス ステーション プラットフォームの従業員アカウント モジュールをテストした後、パスワードを記憶した後、360 ブラウザがアカウントの追加ページとアカウントの変更ページで独自に使用するログイン アカウントとパスワードを入力することがテストでわかりました。 (他の一部のブラウザでもこの問題が発生する可能性があります)。ローカル テストの結果、問題が存在することが判明しました。 次のようなものです:

ユーザーの観点から見ると、ブラウザの問題であっても、これは絶対に不可能です。グループのメンバーによる段階的な調査により、最終的に解決策が見つかりました。

1. オンライン検索により、一部の記事で、テキスト ボックスのオートコンプリート属性を変更後にオフに設定する方法が提供されていることがわかりました。この方法によると、問題は解決されないことがわかりました。この属性の意味は、ブラウザが以前に入力した値を自動的に記録することを許可するかどうかを表していることがわかりました。

2. 「ほとんどのブラウザはフォームフィールドの type="password" に基づいてパスワードフィールドを決定する」ということを記事で知り、「テキストボックスを動的に変更する」という解決策も示しました。 。

ページが読み込まれたら、パスワード ボックスではなくテキスト ボックスに変更します。確かに、パスワードは一致しません。パスワードボックスにフォーカスが当たったら、type属性をthis.type="password"に変更することで機能を実現できます。ただし、IE ブラウザでテストしたところ、IE8 以前のブラウザでは this.type がエラーを報告することがわかりました。この方法でもまだこの問題を完全に解決することはできません。

3. テキスト ボックスの外側にラベルを入れ子にします

<label id="password2"><input class="txt w-200" value="" type="text" id="SecondPwd" /></label>
ログイン後にコピー

テキスト ボックスにフォーカスを取得した後、ラベルの HTML を直接変更できます

$("#SecondPwd").live('focus', function () {    if ($(this).attr('type') == 'text') {        /*改变label标签的html*/        $('#password2').html('<input class="txt w-200" value="" type="password" id="SecondPwd" />');        /*标签获取焦点*/        $('#SecondPwd').focus();    }})
ログイン後にコピー

この方法この効果は IE8 以下のブラウザで実現できますが、その後のテストの結果、ユーザー名とパスワードは 360 Rapid モードでも入力できることが判明し、他の解決策を見つける必要があります

4. 5 番目の方法を使用する場合 この方法の前に、最初にすべてのボックスを読み取り専用に設定し、次にフォーカスを取得した後に書き込み可能に設定し、フォーカスを失った後に読み取り専用に設定することを検討します。ただし、パスワード ボックスは設定後も一致します。書き込み可能。

5. 表示されたテキスト ボックスと非表示のパスワード ボックスをロードします

<label id="password1">    <input class="txt w-200 fl" value="" type="text" name="txtPwd" id="txtPwd" />    <input class="txt w-200 fl" value="" type="password" name="Pwd" id="Pwd" style="display: none" readonly="true" />//为了防止隐藏的文本框被匹配上  先设置为只读</label>
ログイン後にコピー

テキスト ボックスが再びフォーカスを取得したとき

$("[name=txtPwd]").live('focus', function () {    /*当前文本框隐藏*/    $(this).hide();    /*隐藏的密码框显示并且获取焦点 只读属性去掉*/    $('#pwd1').show().attr('readonly', false).focus();})
ログイン後にコピー

これにも遭遇した場合問題がある場合は、この方法を参照することも、より良い方法を持っている人がいる場合は共有することもできます。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート