it-swarm.dev

الإكمال التلقائي = 'إيقاف' لا يعمل عندما يكون نوع الإدخال هو كلمة المرور وجعل حقل الإدخال أعلىها لتمكين الإكمال التلقائي

لدي نموذج مع الإكمال التلقائي معطّل لكنه لا يعمل ويجعل الإكمال التلقائي ممكّنًا في فايرفوكس والإصدار الأعلى من Chrome

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

عندما يتم تغيير النوع من كلمة المرور إلى نص يعمل في جميع المتصفح. يمكن لأي شخص أن يساعد في حل هذه المشكلة؟

35
user2594463

عادة ما يكون للمتصفح ميزتان مرتبطتان مختلفتان فيما يتعلق بالنماذج:

  • نموذج الإكمال التلقائي ، حيث عناصر <input type="text"> نوع (وما شابه) يجمع القيم المكتوبة ويعرضها مرة أخرى في شكل قائمة منسدلة.
    (إنها ميزة بسيطة تعمل بشكل جيد.)

  • مدير كلمات المرور ، حيث يطالب المتصفح بتذكر مجموعات اسم المستخدم/كلمة المرور عندما يكتشف أنك قدمت نموذج تسجيل دخول. عند العودة إلى الموقع ، تعرض معظم المتصفحات أسماء المستخدمين المتاحة في مربع القائمة المنسدلة (Firefox و Chrome و Internet Explorer ...) ولكن بعضها يحتوي على زر شريط أدوات (Opera). أيضًا ، Chrome يسلط الضوء على الحقول ذات اللون الأصفر الثابت.
    (هذا يعتمد على الاستدلال وقد يفشل في صفحات معينة.)

هناك حالة حافة مع النماذج الموسومة كـ autocomplete="off". ماذا يحدث إذا كان نموذج تسجيل الدخول وكان المستخدم قد قام في السابق بتخزين اسم المستخدم/كلمة المرور؟ في الواقع إزالة كلمة المرور من قاعدة البيانات المحلية تبدو غير لائقة لذلك ربما لا يوجد متصفح يفعل ذلك. (في الواقع ، لا يتم مسح بيانات الإكمال التلقائي للنموذج أيضًا). يقرر Firefox منح المستخدم الطاقة: لديك كلمة مرور ، لذلك سأسمح لك باستخدامها. Chrome يقرر منح السلطة للموقع.

18
Álvaro González

يمكنك فقط جعل الحقل للقراءة فقط أثناء تحميل النموذج. بينما يحصل الحقل على التركيز ، يمكنك تغيير هذا الحقل ليكون قابلاً للتحرير. هذه هي أبسط طريقة لتجنب الإكمال التلقائي.

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
38
sujivasagam

عندما واجهت نفس المشكلة ، قمت بحلها عن طريق إنشاء مربع نص مؤقت أعلى حقل كلمة المرور وإخفائه

مثله،

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

ستجعل حقل النص username لا يُظهر أي كلمات تمت كتابتها مسبقًا في قائمة منسدلة. نظرًا لعدم وجود سمة مثل name ، id لحقل الإدخال <input type="text" style="display:none;"> لن يرسل أي معلمات إضافية أيضًا.

لست متأكدًا من أن هذه ممارسة جيدة ، ولكنها ستحل المشكلة.

30
Arivarasan L

هذا سيمنع الملء التلقائي لكلمة المرور في حقل الإدخال (type = "password").

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>
12
sunny rai

فقط أضف السمة autocomplete="new-password" إلى حقل إدخال كلمة المرور الخاصة بك.

لمعرفة المزيد حول autocomplete: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

6
alexpirine

لقد جربت كل أنواع الحلول ، لكن تلك المجموعة فقط عملت على جميع المتصفحات في حالتي:

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

وانها حل نظيفة جدا جدا :)

4
Jan Capuder

لنوع النص استخدم autocomplete="off" أو autocomplete="false"

<input id="username" type="text" autocomplete="false">

لنوع كلمة المرور ، استخدم autocomplete="new-password"

<input id="password" type="password" autocomplete="new-password">
3
Venki WAR

حل بلدي الملهم هنا يذهب على النحو التالي:

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

من المؤكد أنها قبيحة ، تشعر أنها في غير محله في عام 2017 ، لكنها تعمل وتحمي اسم المستخدم وكلمة المرور من الملء التلقائي. لاحظ أنه في Firefox (الإصدار 51 في وقت كتابة هذا التقرير) ، لا يهم قليلاً ما هي تركيبة name أو id أو autocomplete المستخدمة ، سواء أكانت في النموذج أم حقول الإدخال. بدون أول حقلين وهمية ، ستتم عملية الملء التلقائي في أي وقت يتم فيه مطابقة النطاق وسيؤدي ذلك إلى تدمير يومك.

2
VoY

ما نجح بالنسبة لي ، كان استخدام الإكمال التلقائي = "كلمة مرور جديدة" فقط في نوع الإدخال = "كلمة المرور" ، مثل هذا:

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

بشكل مستقل عن عدد المدخلات التي لديها النموذج.

2
Sieg

إليك الاختراق الذي يبدو أنه يعمل في Firefox و Chrome.

في Firefox ، يبدو أن وجود حقل نص معطل قبل حقل كلمة المرور يؤدي الحيلة ، حتى إذا كان مخفيًا (معطل: لا شيء)

في Chrome ، يكون has مرئيًا.

لذلك أقترح شيء مثل هذا:

HTML:

<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">

CSS:

input[type=text].password-autocomplete-disabler {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}
2
jlowcs

لكلمة المرور ، لا يعمل حاليا.

لذلك بشكل افتراضي جعل حقل كلمة المرور كنص واستخدام رمز js التالي.

$('#real-password').on('input', function(){
            if ($(this).val() !== '') {
                $(this).attr('type', 'password');
            } else {
                $(this).attr('type', 'text');
            }
   });
1
Lakin Mohapatra
<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

ها أنت ذا.

1
Bhaumik Thakkar

أعرف أن هذا سؤال قديم ، لكن المتصفحات تتغير مع مرور الوقت. على الرغم من أن بعض من الإجابات على هذا السؤال المذكورة هنا مثل: مدير كلمة المرور هو الحصول على ثلاثة مدخلات منفصلة إضافية على الأقل من كلمات المرور المخفية ، ولكل منها قيم وهمية مختلفة ، مثل:

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
        <input type="password" style="display: none;" value="dummyinput1"/>
        <input type="password" style="display: none;" value="dummyinput2"/>
        <input type="password" style="display: none;" value="dummyinput3"/>
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>
1
code4kix

بلدي سول:

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

function turnOnPasswordStyle(){
    $('#inputpassword').attr('type', "password");
}
1
Stav Bodik

مضيفا autocomplete="off" لن يقطعها - لقد تجاهلها Chrome.

تغيير سمة نوع الإدخال إلى type="search".
لا تطبق Google ميزة الملء التلقائي على المدخلات بنوع من البحث.

1
Matas Vaitkevicius

لقد وجدت أنه إذا لم يكن للإدخال اسم (على سبيل المثال لم يتم تعيين سمة الاسم) ، فلن يتمكن المتصفح من إكمال الحقل تلقائيًا. أعرف أن هذا ليس حلاً للجميع ، ولكن إذا قمت بتقديم النموذج الخاص بك من خلال AJAX ، فيمكنك تجربة ذلك.

1
JotaDeAA

لقد واجهت هذه المشكلة مؤخرًا ، وبدون حل بسيط نظرًا لأنه يمكن تعبئة الحقول الخاصة بي مسبقًا ، أردت مشاركة مخترق أنيق خطرت لي من خلال تحديد نوع كلمة المرور في الحدث الجاهز.

لا تعلن حقل الإدخال الخاص بك ككلمة مرور اكتب عند إنشائها ، ولكن أضف مستمع أحداث جاهزًا لإضافته لك باستخدام jQuery:

<input type="text" name="pswd" id="password" maxlength="16" size="20" >

<script>
$(function(){
    document.getElementById('password').setAttribute('type', 'password');
});
</script>
1
Matthew

autocomplete=off يتم تجاهله إلى حد كبير في المتصفحات الحديثة - يرجع في المقام الأول إلى مديري كلمة المرور إلخ.

يمكنك محاولة إضافة هذا autocomplete="new-password" غير مدعوم بالكامل من قبل جميع المتصفحات ، لكنه يعمل على بعض

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>
1
Mahdi Afzal

أعتقد أن هذه المشكلة خاصة بالمتصفح (chrome) ، لذلك يمكنك التعامل عن طريق إضافة شرط لـ chrome أعجب فقط:

@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })

autocomplete = (Request.Browser.Browser.ToLower (). يحتوي على ("chrome")؟ "new-password": "off")

1
Chirag

لماذا لا يستخدم الجميع هذا ....

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

في غاية البساطة... :)

1
MRRaja

هناك طريقة مختلفة تتمثل في تنظيف قيمة حقل كلمة المرور في تحميل الصفحة بدلاً من محاولة منعها من الملء التلقائي.

مع jQuery ببساطة أضف شيئًا مثل:

$(function() { $('input[type="password"]').val(''); });
1
Andrej

وجدت للتو حلًا بسيطًا آخر وعملت معي على جميع المتصفحات الرئيسية الثلاثة Chrome Firefox and Opera

<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>
0
gourav bajaj

حاول إعداد الإكمال التلقائي = "كلمة مرور جديدة" كما هو موضح أدناه:

<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />
0
Baig