html - ملئ - حفظ البيانات في المتصفح




تعطيل الملء التلقائي في Chrome (20)

لقد واجهت مشكلات في سلوك الملء التلقائي على العديد من النماذج.

تحتوي الحقول الموجودة في النموذج على أسماء شائعة ودقيقة جدًا ، مثل "البريد الإلكتروني" أو "الاسم" أو "كلمة المرور" ، كما أن لها أيضًا autocomplete="off" set.

لقد نجحت علامة الإكمال التلقائي في تعطيل سلوك الإكمال التلقائي ، حيث تظهر قائمة منسدلة للقيم عند بدء الكتابة ، ولكن لم يتم تغيير القيم التي يقوم Chrome تلقائيًا بملء الحقول بها.

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

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


إذا كنت تقوم بتنفيذ ميزة مربع البحث ، فحاول تعيين سمة type search النحو التالي:

<input type="search" autocomplete="off" />

هذا يعمل لي على Chrome v48 ويبدو أنه ترميز مشروع:

https://www.w3.org/TR/html-markup/input.search.html


إذا كنت تواجه مشكلات في الاحتفاظ بالعناصر النائبة لكن مع تعطيل الملء التلقائي للكروم ، فقد وجدت هذا الحل.

مشكلة

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

لا يزال المثال أعلاه ينتج مشكلة الملء التلقائي ، ولكن إذا كنت تستخدم الخيار required="required" وبعض CSS ، فيمكنك نسخ العناصر النائبة نسخًا متماثلاً ولن يلتقط Chrome العلامات.

حل

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/


بالنسبة إلى إصدارات Chrome الجديدة ، يمكنك فقط إضافة autocomplete="new-password" في حقل كلمة المرور الخاصة بك وهذا كل شيء. لقد راجعت ذلك ، يعمل بشكل جيد.

حصلت على هذه النصيحة من مطور Chrome في هذا النقاش: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

ملاحظة: لا تنس استخدام أسماء فريدة لحقول مختلفة لمنع الملء التلقائي.


بالنسبة إلى مجموعات كلمة مرور اسم المستخدم ، تعد هذه مشكلة سهلة الحل. تبحث طرق البحث الكروم عن النمط:

<input type="text">

تليها:

<input type="password">

قم ببساطة باختراق هذه العملية بإبطال هذا:

<input type="text">
<input type="text" onfocus="this.type='password'">

بعد شهور وأشهر من النضال ، وجدت أن الحل أبسط بكثير مما يمكن تخيله:

بدلاً من autocomplete="off" استخدم autocomplete="false" ؛)

بهذه البساطة ، ويعمل مثل السحر في Google Chrome أيضًا!


جرب رمز jQuery التالي الذي عمل بالنسبة لي.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

عن طريق إعداد autocomplete إلى off يجب أن يعمل هنا لدي مثال تستخدمه google في صفحة البحث. لقد وجدت هذا من عنصر التفتيش.

تعديل : في حالة عدم العمل ، حاول استخدام false أو nofill . في حالتي أنها تعمل مع إصدار الكروم 48.0


في بعض الأحيان حتى autocomplete=off يمنع ملء بيانات الاعتماد في الحقول الخاطئة.

الحل هو تعطيل الملء التلقائي للمستعرض باستخدام وضع readonly ووضعه للكتابة على التركيز:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

حدث focus يحدث في نقرات الماوس و tabbing من خلال المجالات.

تحديث:

يُحدد Safari Mobile المؤشر في الحقل ، لكنه لا يعرض لوحة المفاتيح الظاهرية. يعمل هذا الحل البديل الجديد من قبل ، ولكنه يتعامل مع لوحة المفاتيح الافتراضية:

<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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explanation: المستعرض التلقائي يقوم بملء بيانات الاعتماد الى مجال النص غير الصحيح؟

ملء المدخلات بشكل غير صحيح ، على سبيل المثال ملء إدخال الهاتف مع عنوان بريد إلكتروني

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

هذا الإصلاح للقراءة أعلاه عمل لي.


لا أعرف لماذا ، لكن هذا ساعد وعمل لي.

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

ليس لدي أي فكرة عن السبب ، ولكن autocompelete = "new-password" يعطل الملء التلقائي. عملت في أحدث إصدار من الكروم 49.0.2623.112 .


لقد اكتشفت للتو أنه إذا كان لديك اسم مستخدم وكلمة مرور متذكرين لموقع ، فإن الإصدار الحالي من Chrome سيعمل تلقائيًا على إدخال اسم المستخدم / عنوان البريد الإلكتروني في الحقل قبل أي type=password حقل type=password . لا يهمني ما يسمى المجال - فقط يفترض المجال قبل كلمة المرور ستكون اسم المستخدم الخاص بك.

الحل القديم

ما عليك سوى استخدام <form autocomplete="off"> ويمنع ملء كلمة المرور مسبقًا وأي نوع من ملء الحواف الاستكشافية للحقول استنادًا إلى افتراضات قد يقوم المتصفح بعملها (والتي غالبًا ما تكون خاطئة). على عكس استخدام <input autocomplete="off"> الذي يبدو أنه يتم تجاهله إلى حد كبير بواسطة الملء التلقائي لكلمة المرور (في Chrome ، فإن Firefox يطيعه).

حل محدث

يتجاهل Chrome الآن <form autocomplete="off"> . لذلك الحل الأصلي الخاص بي (الذي قمت بحذفه) هو الآن كل الغضب.

ببساطة خلق اثنين من الحقول وجعلها مخفية مع "العرض: لا شيء". مثال:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

ثم ضع الحقول الحقيقية الخاصة بك تحتها.

تذكر أن تضيف تعليق أو أشخاص آخرين في فريقك سوف يتساءلون عما تقوم به!

تحديث مارس 2016

تم اختباره باستخدام أحدث إصدار من Chrome - كل ذلك جيد. هذه إجابة قديمة إلى حد ما الآن ، لكني أريد أن أذكر فقط أن فريقنا يستخدمها منذ سنوات في عشرات المشاريع. لا يزال يعمل بشكل جيد على الرغم من بعض التعليقات أدناه. لا توجد مشاكل مع إمكانية الوصول لأن الحقول display:none يعني أنها لا تحصل على التركيز. كما ذكرت ، يجب عليك وضعها أمام حقولك الحقيقية.

إذا كنت تستخدم javascript لتعديل النموذج الخاص بك ، فهناك خدعة إضافية ستحتاجها. أظهر الحقول المزيفة أثناء معالجة النموذج ثم أخفِه مرة أخرى بعد مرور ميلي ثانية.

مثال التعليمة البرمجية باستخدام jQuery (على افتراض أنك تعطي الحقول المزيفة صفًا):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

لم يقدم مايك نيلسونز حلًا مناسبًا لي في Chrome 50.0.2661.102 م. ما عليك سوى إضافة عنصر إدخال من النوع نفسه مع الشاشة: لم تعد أي مجموعة تعطل الإكمال التلقائي للمتصفح الأصلي. من الضروري الآن تكرار سمة الاسم لحقل الإدخال الذي تريد تعطيل الإكمال التلقائي عليه.

أيضًا ، لتجنب تكرار تكرار حقل الإدخال عندما تكون داخل عنصر نموذج ، يجب أن تقوم بتعطيل العنصر الذي لا يتم عرضه. سيمنع هذا العنصر من تقديمه كجزء من إجراء النموذج.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

هناك قطعتان لهذا. سيتذكر Chrome والمتصفحات الأخرى القيم التي تم إدخالها مسبقًا لأسماء الحقول ، ويقدم قائمة الإكمال التلقائي للمستخدم استنادًا إلى ذلك (لا سيما أن مدخلات نوع كلمة المرور لا يتم تذكرها بهذه الطريقة ، لأسباب واضحة تمامًا). يمكنك إضافة autocomplete="off" لمنع ذلك من أشياء مثل حقل بريدك الإلكتروني.

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


وفقًا لتقرير Chromium bug # 352347 لم يعد Chrome يحترم autocomplete="off|false|anythingelse" ، ولا في النماذج ولا في المدخلات.

كان الحل الوحيد الذي عمل بالنسبة لي هو إضافة حقل كلمة مرور وهمية :

<input type="password" class="hidden" />
<input type="password" />

يجب عليك إضافة هذه السمة:

autocomplete="new-password"

رابط المصدر: المادة كاملة


Different solution, webkit based. As mentioned already, anytime Chrome finds a password field it autocompletes the email. AFAIK, this is regardless of autocomplete = [whatever].

To circumvent this change the input type to text and apply the webkit security font in whatever form you want.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

From what I can see this is at least as secure as input type=password, it's copy and paste secure. However it is vulnerable by removing the style which will remove asterisks, of course input type = password can easily be changed to input type = text in the console to reveal any autofilled passwords so it's much the same really.


I've faced same problem. And here is the solution for disable auto-fill user name & password on Chrome (just tested with Chrome only)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">

Instead of "this is what worked for me" answers and other answers that look like complete hacks... This is currently how chrome (and the latest spec) will handle the autocomplete attributes on your input elements:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR: Add autocomplete='<value>' on your inputs, where <value> should be any string that defines what the field is for. This works similarly to the name attribute. Use the suggested values on the link above where possible.

Also, remove the autocomplete attribute from your form


Previously entered values cached by chrome is displayed as dropdown select list.This can be disabled by autocomplete=off , explicitly saved address in advanced settings of chrome gives autofill popup when an address field gets focus.This can be disabled by autocomplete="false".But it will allow chrome to display cached values in dropdown.

On an input html field following will switch off both.

Role="presentation" & autocomplete="off"

While selecting input fields for address autofill Chrome ignores those input fields which don't have preceding label html element.

To ensure chrome parser ignores an input field for autofill address popup a hidden button or image control can be added between label and textbox. This will break chrome parsing sequence of label -input pair creation for autofill. Checkboxes are ignored while parsing for address fields

يعتبر Chrome أيضًا "للسمة" على عنصر التسمية. يمكن استخدامه لكسر تسلسل تحليل الكروم.


The only way that works for me was:(jQuery required)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Well since we all have this problem I invested some time to write a working jQuery extension for this issue. Google has to follow html markup, not we follow Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Just add this to a file like /js/jquery.extends.js and include it past jQuery. Apply it to each form elements on load of the document like this:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle with tests





autofill