html - क्रोम ऑटोफिल को अक्षम करना




forms google-chrome (20)

मैं कई रूपों पर क्रोम ऑटोफिल व्यवहार के साथ मुद्दों में भाग रहा हूं।

फॉर्म में फ़ील्ड में बहुत ही सामान्य और सटीक नाम होते हैं, जैसे कि "ईमेल", "नाम", या "पासवर्ड", और उनके पास autocomplete="off" सेट भी है।

स्वत: पूर्ण ध्वज ने स्वत: पूर्ण व्यवहार को सफलतापूर्वक अक्षम कर दिया है, जहां टाइपिंग शुरू होने के बाद मानों का एक ड्रॉपडाउन दिखाई देता है, लेकिन उन मानों को नहीं बदला है जो क्रोम फ़ील्ड को ऑटो-पॉप्युलेट करता है।

यह व्यवहार ठीक रहेगा सिवाय इसके कि क्रोम इनपुट को गलत तरीके से भर रहा है, उदाहरण के लिए एक ईमेल पते के साथ फोन इनपुट भरना। ग्राहकों ने इसके बारे में शिकायत की है, इसलिए यह कई मामलों में होने के लिए सत्यापित है, और कुछ ऐसा नतीजा नहीं है जो मैंने अपनी मशीन पर स्थानीय रूप से किया है।

एकमात्र वर्तमान समाधान मैं सोच सकता हूं कि गतिशील रूप से कस्टम इनपुट नाम उत्पन्न करना है और फिर बैकएंड पर मान निकालना है, लेकिन यह इस समस्या के आसपास एक सुंदर हैकी तरीके जैसा लगता है। क्या कोई टैग या क्विर्क है जो ऑटोफिल व्यवहार को बदलता है जिसका उपयोग इसे ठीक करने के लिए किया जा सकता है?


आपको यह विशेषता जोड़नी है:

autocomplete="new-password"

स्रोत लिंक: पूर्ण लेख


इसमें दो टुकड़े हैं। क्रोम और अन्य ब्राउज़र फ़ील्ड नामों के लिए पहले दर्ज किए गए मानों को याद रखेंगे, और उस पर आधारित उपयोगकर्ता को स्वत: पूर्ण सूची प्रदान करेंगे (विशेष रूप से, पासवर्ड प्रकार इनपुट को इस तरह से कभी भी याद नहीं किया जाता है, काफी स्पष्ट कारणों से)। आप अपने ईमेल फ़ील्ड जैसी चीज़ों पर इसे रोकने के लिए autocomplete="off" जोड़ सकते हैं।

हालांकि, फिर आपके पास पासवर्ड फिलर्स हैं। अधिकांश ब्राउज़रों में अपने स्वयं के अंतर्निहित कार्यान्वयन होते हैं और ऐसी कार्यक्षमता प्रदान करने वाली कई तृतीय-पक्ष सुविधाएं भी होती हैं। यह, आप रुक सकते हैं । यह उपयोगकर्ता इस जानकारी को बाद में स्वचालित रूप से भरने के लिए अपनी पसंद बना रहा है, और यह आपके आवेदन के प्रभाव के दायरे और क्षेत्र के बाहर पूरी तरह से बाहर है।


उपयोगकर्ता नाम पासवर्ड combos के लिए यह हल करने के लिए एक आसान मुद्दा है। क्रोम हेरिस्टिक्स पैटर्न की तलाश में है:

<input type="text">

के बाद:

<input type="password">

इस प्रक्रिया को अमान्य करके बस इस प्रक्रिया को तोड़ दें:

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

कभी-कभी यहां तक ​​कि autocomplete=off गलत क्षेत्रों में प्रमाण-पत्रों को भरने से रोक नहीं पाएंगे।

वर्कअराउंड रीडोनली-मोड का उपयोग करके ब्राउज़र ऑटोफिल को अक्षम करना और फोकस पर लिखने योग्य सेट करना है:

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

focus ईवेंट माउस क्लिक और फ़ील्ड के माध्यम से टैबबिंग पर होता है।

अद्यतन करें:

मोबाइल सफारी क्षेत्र में कर्सर सेट करता है, लेकिन वर्चुअल कीबोर्ड नहीं दिखाता है। यह नया कामकाज पहले की तरह काम करता है, लेकिन वर्चुअल कीबोर्ड को संभालता है:

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

लाइव डेमो https://jsfiddle.net/danielsuess/n0scguv6/

// अद्यतन अंत

स्पष्टीकरण: ब्राउज़र ऑटो गलत टेक्स्ट फ़ील्ड में प्रमाण-पत्र भरता है?

इनपुट को गलत तरीके से भरना, उदाहरण के लिए एक ईमेल पते के साथ फोन इनपुट भरना

कभी-कभी मुझे क्रोम और सफारी पर यह अजीब व्यवहार दिखाई देता है, जब एक ही रूप में पासवर्ड फ़ील्ड होते हैं मुझे लगता है, ब्राउज़र आपके सहेजे गए क्रेडेंशियल डालने के लिए पासवर्ड फ़ील्ड ढूंढता है। फिर यह उपयोगकर्ता नाम को निकटतम टेक्स्ट-इनपुट फ़ील्ड में स्वत: भर देता है, जो कि डोम में पासवर्ड फ़ील्ड से पहले दिखाई देता है (केवल अवलोकन के कारण अनुमान लगाता है )। चूंकि ब्राउज़र आखिरी उदाहरण है और आप इसे नियंत्रित नहीं कर सकते हैं,

उपरोक्त यह पठनीय-ठीक मेरे लिए काम किया।


निम्न jQuery कोड आज़माएं जो मेरे लिए काम करता है।

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

महीनों और महीनों के संघर्ष के बाद, मैंने पाया है कि समाधान कल्पना करने से कहीं अधिक सरल है:

autocomplete="off" बजाय autocomplete="false" उपयोग करें;)

उतना सरल, और यह Google क्रोम में एक आकर्षण की तरह काम करता है!


मुझे नहीं पता क्यों, लेकिन इससे मेरी मदद की और काम किया।

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

मुझे नहीं पता कि क्यों, लेकिन autocompelete = "नया पासवर्ड" ऑटोफिल अक्षम करता है। यह नवीनतम 49.0.2623.112 क्रोम संस्करण में काम किया।


मेरे लिए, सरल

<form autocomplete="off" role="presentation">

ने करदी।

कई संस्करणों पर परीक्षण किया गया, अंतिम प्रयास 56.0.2 9 24.87 पर था


मैंने पाया है कि इसे किसी फ़ॉर्म में जोड़ने से क्रोम ऑटोफिल का उपयोग करने से रोकता है।

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

यहां मिला https://code.google.com/p/chromium/issues/detail?id=468153#hc41

वास्तव में निराशाजनक है कि क्रोम ने फैसला किया है कि यह डेवलपर से स्वत: पूर्ण होने के बारे में बेहतर जानता है। एक असली माइक्रोसॉफ्ट इसे महसूस करता है।


यदि आप एक खोज बॉक्स सुविधा लागू कर रहे हैं, तो निम्नानुसार search करने के लिए type विशेषता को सेट करने का प्रयास search :

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

यह क्रोम v48 पर मेरे लिए काम कर रहा है और यह वैध मार्कअप प्रतीत होता है:

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


यह इतना आसान और मुश्किल है :)

Google क्रोम मूल रूप से उनके लिए स्वत: रीफिल सक्षम करने के लिए <form> , <body> और <iframe> टैग के अंदर प्रत्येक पहले दृश्यमान पासवर्ड तत्व की खोज करता है, इसलिए इसे अक्षम करने के लिए आपको निम्न के रूप में एक डमी पासवर्ड तत्व जोड़ने की आवश्यकता है:

    • यदि <form> password <form> टैग के अंदर आपका पासवर्ड तत्व आपको <form> खुले टैग के तुरंत बाद डमी तत्व को अपने फॉर्म में पहले तत्व के रूप में रखना होगा

    • यदि आपका पासवर्ड तत्व <form> टैग के अंदर नहीं है तो <body> खुले टैग के तुरंत बाद डमी तत्व को अपने HTML पृष्ठ में पहले तत्व के रूप में डालें

  1. आपको सीएसएस display:none बिना डमी तत्व को छिपाने की जरूरत है display:none मूल रूप से डमी पासवर्ड तत्व के रूप में निम्न का उपयोग नहीं करता है।

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    

यहाँ एक गंदे हैक है -

आपके यहां आपका तत्व है (अक्षम विशेषता जोड़ना):

<input type="text" name="test" id="test" disabled="disabled" />

और फिर अपने वेबपृष्ठ के नीचे कुछ जावास्क्रिप्ट डालें:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

क्रोमियम बग रिपोर्ट के अनुसार # 352347 क्रोम अब autocomplete="off|false|anythingelse" सम्मान करता है, न तो फॉर्मों पर और न ही इनपुट पर।

मेरे लिए काम करने वाला एकमात्र समाधान एक डमी पासवर्ड फ़ील्ड जोड़ना था:

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

autocomplete करने के लिए यहां काम करना चाहिए, मेरे पास एक उदाहरण है जिसका उपयोग Google द्वारा खोज पृष्ठ में किया जाता है। मैंने इसे निरीक्षण तत्व से पाया।

संपादित करें : अगर off नहीं हो रहा है तो false या nofill । मेरे मामले में यह क्रोम संस्करण 48.0 के साथ काम कर रहा है


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

क्रोम लेबल तत्व पर "के लिए" विशेषता भी मानता है। इसका उपयोग क्रोम के पार्सिंग अनुक्रम को तोड़ने के लिए किया जा सकता है।


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