CSS के माध्यम से स्वत: पूर्ण अक्षम करें


94

क्या एक फार्म तत्व (विशेष रूप से एक टेक्स्टफील्ड) पर स्वत: पूर्ण अक्षम करने के लिए सीएसएस का उपयोग करना संभव है?

मैं एक टैग लाइब्रेरी का उपयोग करता हूं जो स्वतः पूर्ण तत्व की अनुमति नहीं देता है और मैं जावास्क्रिप्ट का उपयोग किए बिना स्वत: पूर्ण अक्षम करना चाहूंगा।

जवाबों:


52

आप एक उत्पन्न idऔर प्रत्येक का उपयोग कर सकते हैं name, जो अलग है, इसलिए ब्राउज़र इस पाठ-क्षेत्र को याद नहीं रख सकता है और कुछ मानों को सुझाने में विफल होगा।

यह कम से कम क्रॉस ब्राउज़र सुरक्षित विकल्प है, लेकिन मैं रॉबर्टसनम ( autocomplete="off") से जवाब के साथ जाने की सलाह दूंगा ।


4
इसका एक साइड इफेक्ट यह है, कि कई अलग-अलग (रैंडम) फॉर्म फील्ड के साथ ब्राउजर हिस्ट्री क्लैट हो जाती है। ब्राउज़रों में ज्ञात मूल्यों के लिए प्रत्येक लुकअप स्थानीय डेटाबाई में कुछ समय लगेगा।
जिल्द की सूजन

4
अच्छा विचार है, लेकिन यह क्रेडिट कार्ड नंबर को अनएन्क्रिप्टेड स्वतः पूर्ण डेटाबेस में सहेजे जाने से नहीं रोकता है।
हंस-पीटर स्टॉर

यदि आप स्थैतिक नियंत्रण नाम / आईडी का उपयोग नहीं करते हैं, तो किसी भी स्क्रिप्टिंग को तोड़ दिया जाएगा और किसी भी प्रकार का डेटा संग्रह भी टूट जाएगा (जब तक कि आपके आवेदन का हर पहलू नए नामकरण सम्मेलन से अवगत न हो और गतिशील रूप से किसी भी स्क्रिप्टिंग / डेटा संग्रह को अपडेट कर रहा हो )।
गैरी रिक्टर

मैं आपको स्वत: पूर्ण, "यादृच्छिक" करने से बचना चाहिए क्योंकि क्षेत्र के नाम जाने का एकमात्र वास्तविक तरीका है। किसी भी संकेत का उपयोग करना autocomplete="off"ब्राउज़र एक्स संस्करण (वर्तमान + 1) में अनदेखा करने वाला है। (उदाहरण के लिए, नवीनतम Google Chrome स्वत: पूर्ण = बंद को अनदेखा करता है।)
मिकको रैंटलैनेन

@kmoser: भले ही आप ब्राउज़र के स्वत: पूर्ण फ़ीचर को यादृच्छिक रूप से हारते हैं, फिर idभी इसे कैश में सहेजेगा (यानी उपयोगकर्ता की हार्ड ड्राइव पर।) जो किसी के क्रेडिट कार्ड नंबर या किसी अन्य संवेदनशील जानकारी के लिए करना एक भयानक बात है। इसके अतिरिक्त, यह अनावश्यक रूप से आपके उपयोगकर्ता के डिस्क ड्राइव को बंद कर देता है। हर बार जब वे आपके पृष्ठ पर जाते हैं तो एक नई (कुकी जैसी) फ़ाइल उनके कंप्यूटर पर सहेजी जाएगी। बस इसके लिए, अपने Chrome कैश को साफ़ करने का प्रयास करें और देखें कि यह कितना खाली हो जाएगा (यदि आपने इसे थोड़ी देर के लिए नहीं किया है)। इसलिए मैं इसे एक भयानक विचार कहता हूं।
c00000fd

129

जैसा कि यह खड़ा है, सीएसएस में कोई 'स्वत: पूर्ण बंद' विशेषता नहीं है। हालाँकि, HTML में इसके लिए एक आसान कोड है:

<input type="text" id="foo" value="bar" autocomplete="off" />

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

क्रोम और फ़ायरफ़ॉक्स () में स्वतः पूर्ण विशेषता ठीक काम करती है, लेकिन यह भी देखें कि क्या HTML फॉर्म में स्वत: पूर्ण को अक्षम करने का W3C वैध तरीका है?


4
developer.mozilla.org/en-US/docs/Web/Security/… से पता चलता है autocomplete="anyrandominvalidvalue"कि काम करेगा।
एंड्रयू स्टेलर

49

आप आसानी से jQuery द्वारा लागू कर सकते हैं

$('input').attr('autocomplete','off');

4
बहुमत के मामलों में, $ ('फ़ॉर्म')। attr ('स्वतः पूर्ण', 'बंद'); बहुत अधिक कुशल है (नीचे एक उत्तर के लिए टिप्पणी देखें)
irakli

@irakli मेरे मामले में, का उपयोग formकरना केवल एक चीज है जो काम करता है। नहीं है input। धन्यवाद।
कावेरीम

1
नमस्ते, 2018 और यह केवल एक ही तरीका है जिससे मैं इन दिनों काम कर सकता हूं। इसके अलावा, @irakli यह सच है अगर आपको संपूर्ण रूप में हमें चयनकर्ता के रूप में उपयोग करने की आवश्यकता है।
डेवोन चुंबन

15

यदि आप उपयोग कर रहे हैं तो आप formसभी ऑटोकम्प्लीट्स को निष्क्रिय कर सकते हैं,

<form id="Form1" runat="server" autocomplete="off">

वास्तव में, मोज़िला के अनुसार: "यदि किसी इनपुट तत्व पर स्वत: पूर्ण विशेषता निर्दिष्ट नहीं की जाती है, तो ब्राउज़र <इनपुट> तत्व के फॉर्म स्वामी के स्वत: पूर्ण विशेषता मान का उपयोग करता है। प्रपत्र स्वामी या तो फ़ॉर्म तत्व है जो यह <इनपुट" तत्व है। या उस तत्व तत्व का वंशज, जिसकी आईडी इनपुट तत्व के फॉर्म विशेषता द्वारा निर्दिष्ट की गई है। अधिक जानकारी के लिए, <फॉर्म> में स्वत: पूर्ण विशेषता देखें। " ऊपर दिखाए गए एक के लिए यह अधिक प्रभावोत्पादक jQuery के विकल्प पर विचार करना होगा: $ ('फ़ॉर्म')। attr ('स्वतः पूर्ण', 'बंद');
इरकली

13

CSS में यह क्षमता नहीं है। आपको क्लाइंट-साइड स्क्रिप्टिंग का उपयोग करना होगा।


1
किसी भी विचार यह कैसे किनारे में निष्क्रिय करने के लिए? कोई फर्क नहीं पड़ता कि हम क्या देखते हैं।
बेंजामिन ग्रुएनबाम

@BenjaminGruenbaum autocomplete="false"एज में काम करेगा। तकनीकी रूप से कोई भी अमान्य मूल्य यहां "झूठे" के स्थान पर जा सकता है।
एंड्रयू

4

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

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

मैंने पाया कि ब्राउज़र में एक और प्राथमिकता इस अजीब व्यवहार का कारण बन सकती है! इसलिए मैंने और अधिक खोज की और आखिरकार, मैंने इस अच्छे लेख से लाइनों के नीचे फिर से ध्यान से पढ़ा :

इस कारण से, कई आधुनिक ब्राउज़र लॉगिन फ़ील्ड के लिए स्वत: पूर्ण = "बंद" का समर्थन नहीं करते हैं:

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

यदि आप एक उपयोगकर्ता प्रबंधन पृष्ठ को परिभाषित कर रहे हैं, जहां एक उपयोगकर्ता किसी अन्य व्यक्ति के लिए एक नया पासवर्ड निर्दिष्ट कर सकता है, और इसलिए आप पासवर्ड फ़ील्ड को स्वतः भरना रोकना चाहते हैं, तो आप स्वत: पूर्ण = "नया-पासवर्ड" का उपयोग कर सकते हैं ; हालाँकि, इस मूल्य के लिए समर्थन फ़ायरफ़ॉक्स पर लागू नहीं किया गया है।

यह सिर्फ काम किया है। मैंने क्रोम में विशेष रूप से कोशिश की और मुझे उम्मीद है कि यह काम करना जारी रखेगा और दूसरों की मदद करेगा।


1

मैंने सभी इनपुट के लिए एक नकली स्वत: पूर्ण नाम जोड़कर समस्या हल की।

$("input").attr("autocomplete", "fake-name-disable-autofill");

0

@ अहम्मार के समाधान के लिए धन्यवाद, मैं अपने कोणीय + यूआई-राउटर वातावरण में एक ही समस्या को हल करने में सक्षम था , जिसे मैं यहाँ साझा करूँगा जो कोई भी दिलचस्पी ले।

index.htmlमैंने अपनी स्क्रिप्ट में निम्नलिखित स्क्रिप्ट जोड़ी है:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

फिर राज्य परिवर्तनों को कवर करने के लिए, मैंने अपने रूट कंट्रोलर में निम्नलिखित जोड़े हैं:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

HTML के लिए टाइमआउट jquery लागू करने से पहले प्रस्तुत करना है।

यदि आप एक बेहतर समाधान पाते हैं तो कृपया मुझे बताएं।


0

आप स्वत: पूर्ण अक्षम करने के लिए CSS का उपयोग नहीं कर सकते, लेकिन आप HTML का उपयोग कर सकते हैं:

<input type="text" autocomplete="false" />

तकनीकी रूप से आप falseकिसी भी अमान्य मान से बदल सकते हैं और यह काम करेगा। यह आईओएस एकमात्र समाधान मैंने पाया है जो एज में भी काम करता है।


0

उस के लिए 3 तरीके हैं, मैं बेहतर तरीके से होने के क्रम में उनका उल्लेख करता हूं ...

1-HTML तरीका:

<input type="text" autocomplete="false" />

2-जावास्क्रिप्ट तरीका:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery तरीका:

$('input').attr('autocomplete','off');

0

मैं बस स्वत: पूर्ण के 'new-password'बजाय उपयोग करता हूं 'off'

और मेरे पास इस कोड और कार्यों का उपयोग करने का भी प्रयास है (कम से कम मेरे अंत में), मैं आपकी जानकारी के लिए WP और GravityForm का उपयोग करता हूं

$('input').attr('autocomplete','new-password');

-5
$('input').attr('autocomplete','off');

3
यह पूछे गए प्रश्न का उत्तर प्रदान नहीं करता है। ओपी ने विशेष रूप से सीएसएस समाधान के लिए कहा, इसके अलावा, यह पहले से मौजूद एक के समान ही उत्तर है।
Holger Just
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.