HTML / CSS के साथ ब्राउज़र फ़ॉर्म-फिलिंग और इनपुट को ओवरराइड करें

139

मेरे 2 मूल रूप हैं - साइन इन करें और साइन अप करें, दोनों एक ही पृष्ठ पर। अब, मुझे ऑटो-फिलिंग में साइन इन करने में कोई समस्या नहीं है,लेकिन साइन अप फॉर्म ऑटो भरता है, और मुझे यह पसंद नहीं है।

इसके अलावा, प्रपत्र शैलियों को एक पीले रंग की पृष्ठभूमि मिलती है जिसे मैं ओवरराइड नहीं कर सकता और मैं ऐसा करने के लिए इनलाइन सीएसएस का उपयोग नहीं करना चाहता। मैं उन्हें पीले रंग का होने से रोकने के लिए क्या कर सकता हूंऔर (संभवतः) ऑटो फिलिंग? अग्रिम में धन्यवाद!

html  css  input  autofill 
— casraf
स्रोत
4
आप वास्तव में यहां दो प्रश्न पूछ रहे हैं: फॉर्म ऑटोफिल को कैसे निष्क्रिय करें? -और- फॉर्म ऑटोफिल सक्षम होने पर पीले बैकग्राउंड को ओवरराइड कैसे करें? यह तब तक स्पष्ट नहीं था जब तक मैं नीचे दिए गए उत्तरों में सभी टिप्पणियों को नहीं पढ़ता। आप अपने प्रश्न को संपादित करने पर विचार कर सकते हैं (विशेषकर जब से आप एक प्रस्ताव देने के लिए गए हैं)।
— बेन्जादो
आप सही कह रहे हैं, संपादित। या इसके आलसी संस्करण वैसे भी।
— कैसरफ
1
प्रपत्र के उपयोगकर्ता के रूप में, मुझे अपनी पूर्णता के कारण अपनी दृश्य प्राथमिकताओं को स्वत: पूर्ण करने और हाइलाइट करने के कारण अपंगता से घृणा होगी। उपयोगकर्ता को इसे बंद करने दें, आप नहीं। मेरे ब्राउज़िंग अनुभव को अकेला छोड़ दें।
— बायरन ज़ॉग्ग
यह बात है, मैंने केवल पंजीकरण फॉर्म में स्वत: पूर्ण अक्षम किया है, जो मूल रूप से, स्वत: पूर्ण नहीं होना चाहिए, पूर्ण जानकारी केवल एक बार साइन अप करने के बाद बनाई जाती है। लॉगिन फॉर्म के लिए, मैं स्वत: पूर्ण रखना चाहता हूं, लेकिन इसे इनपुट फ़ील्ड पर रखे डंबल रंग को अक्षम करें क्योंकि अंदर का पाठ अपठनीय है - पृष्ठभूमि पीले रंग की है और पाठ का रंग सफेद है (मूल पृष्ठभूमि गहरे भूरे रंग की है) ।
— कैसरफ
1
— ऑटोफिल

जवाबों:

163

स्वतः पूर्णता के लिए, आप उपयोग कर सकते हैं:

<form autocomplete="off">

रंग-समस्या के बारे में:

आपके स्क्रीनशॉट से मैं देख सकता हूं कि वेबकिट निम्न शैली उत्पन्न करता है:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) # आईडी-शैलियाँ .class शैलियों की तुलना में और भी महत्वपूर्ण हैं, निम्नलिखित कार्य कर सकते हैं:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) अगर वह काम नहीं करेगा, तो आप प्रोग्राम के माध्यम से जावास्क्रिप्ट को स्टाइल से सेट करने का प्रयास कर सकते हैं 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) अगर वह काम नहीं करेगा, तो आप बर्बाद हैं :-) इस पर विचार करें: यह अभेद्य पीले रंग को छिपाएगा, लेकिन पाठ को फिर से पढ़ने योग्य बना देगा।

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) एक सीएसएस / जावास्क्रिप्ट समाधान:

सीएसएस:

input:focus {
    background-position: 0 0;
}

और निम्न जावास्क्रिप्ट को ऑनलोड चलाया जाना है:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

उदाहरण के लिए:

<body onload="loadPage();">

सौभाग्य :-)

5) यदि उपरोक्त कार्यों में से कोई भी इनपुट तत्वों को हटाने, उन्हें क्लोन करने की कोशिश नहीं करता है, तो क्लोन किए गए तत्वों को पृष्ठ पर वापस रखना (सफारी 6.0.3 पर काम करता है):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) यहाँ से :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
— फिल रयॉफ
स्रोत
(1) काम नहीं करता है। जब मैं घर वापस आऊँगा (2) कोशिश करूँगा; उम्मीद है कि JS इसे ओवरराइड कर सकती है; धन्यवाद :)
— कैसरफ
1
(4) निश्चित रूप से पीले को हटाता है: सीमा पर ध्यान केंद्रित करें।
— रुरुस्की
यदि अंतिम बिट आपके लिए काम नहीं करता है, और आप जानते हैं कि जावास्क्रिप्ट कैसे काम करता है (आईडी का अधिकार आदि मिला है) आपके पास वह मुद्दा हो सकता है, मैं कुछ कारणों के लिए jquery मोबाइल का उपयोग कर रहा हूं और यह बाद में इनवॉइस और इनपुट की जगह लेता है ऐसा लगता है। इसलिए मैंने जो किया वह एक अंतराल है जो इसे हर 50 एमएस में क्लोन करता है (यह सेटटाइमआउट का उपयोग करके 400ms के बाद काम करता है लेकिन मैं धीमे कनेक्शन को जोखिम में नहीं डालना चाहता)। और एक सेकंड के बाद अंतराल को हटा दिया जाता है:code
— मैथिज सीजर
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— मैथिज्स सीजर
मैं सफारी पर Mavericks के साथ एक ऐसी ही समस्या आ रही है। लेकिन जब मैं विधि 5 को नियोजित करता हूं, तो वे इसे एक सेकंड (या तीन सेकंड के लिए जब मैं टाइमआउट को 3000 पर सेट करता हूं) के लिए बाहर कर देता हूं और फिर ब्राउज़र जीत जाता है और मुझे स्वतः पूर्ण हो गया है। मेरे उपयोग के मामले में, मैं उपयोगकर्ता से किसी अन्य साइट के लिए उनका उपयोगकर्ता नाम / पासवर्ड पूछ रहा हूं ताकि मैं दूसरी साइट से जानकारी खींच सकूं, इसलिए मैं निश्चित रूप से यह नहीं चाहता कि उपयोगकर्ता नाम और पासवर्ड को अपनी साइट के लिए उपयोग करना। इस पर कोई विचार (मूल # 3 के कयामत के अलावा)?
— जैक आरजी
218

इसे "मजबूत" छाया के साथ ट्रिक करें:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— तमसे पाप
स्रोत
10
यह वास्तव में चतुर है। :)
— जॉर्डन ग्रे
3
+1000 (यदि मैं कर सकता था) हाँ, मैं ऐसा करने का कोई अन्य तरीका नहीं समझ सकता। यह वास्तव में वेबकिट की घुसपैठ है ...
— o_O
1
भयानक यह एक नंबर का जवाब होना चाहिए, सरल और प्रभावी
— Pixelomo
3
यह कमाल है कि यह काम करता है और वास्तव में रचनात्मक है। लेकिन यह मुझे पुराने IE6 हैक और इस तरह की याद दिलाता है। Kinda गूगल के भद्दा हमें देने के लिए: -webkit- ऑटोफिल पैरामीटर और डिजाइनरों को डिफ़ॉल्ट को ओवरराइड नहीं करने देता है, है ना?
— स्क्वायरकैंडी
1
एक रंग पसंद प्रदान करना जिसे अनुकूलित नहीं किया जा सकता है वह प्रयोज्यता और न ही पहुंच में मदद कर रहा है। क्रोम में इस निराशाजनक हैक को छोड़कर वे चिंताएं अभी भी पूरी तरह से देव के हाथों में हैं। कोई भी व्यक्ति क्रोम देवों के इरादे को गलत नहीं कर सकता, सिर्फ परिणाम।
— लूनस्टर
25

इस सीएसएस नियम को जोड़ें, और पीले रंग की पृष्ठभूमि गायब हो जाएगी। :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
स्रोत
1
यह मेरे लिए काम किया - धन्यवाद! (हालांकि मुझे वास्तव में वांछित रंग को सफेद करने की आवश्यकता थी)
— jennEDVT
2
स्पष्ट रूप से सबसे अच्छा जवाब।
— ब्रैंडन हैरिस
16 
<form autocomplete="off">

बहुत ज्यादा सभी आधुनिक ब्राउज़र इसका सम्मान करेंगे।

— जेसन केस्टर
स्रोत
7
बहुत बढ़िया, लेकिन यह केवल कम महत्वपूर्ण मुद्दे को हल करता है; मैं कैसे ऑटो को पूर्ण रख सकता हूं लेकिन स्टाइल खो देता है ( prntscr.com/4hkh ) ओ: धन्यवाद हालांकि
— कैसरफ
1
दरअसल, यह दोनों को करना चाहिए। बॉक्स केवल पीला हो जाता है आपको बता दें कि क्रोम / सफारी / एफएफ ने इसे आपके पासवर्ड के साथ ऑटोफिल किया है। यदि आप इसे भरने के लिए नहीं कहते हैं, तो इसे इसमें रंग भरने का मौका नहीं मिलेगा।
— जेसन केस्टर
11
हां, लेकिन जो मैंने कहा था उसे देखें: "मैं कैसे ऑटो को पूरा रख सकता हूं लेकिन स्टाइल वेबकिट को खो देता है "
— कैसरफ
केवल इसके साथ समस्या autocompleteयह है कि यह संस्करण 5 से पहले HTML में अमान्य है
— पॉल डी। वेइट
15

खोज के 2 घंटे बाद ऐसा लगता है कि Google Chrome अभी भी किसी तरह पीले रंग को ओवरराइड करता है, लेकिन मुझे यह ठीक लगा। यह हॉवर, फोकस आदि के लिए भी काम करेगा। आपको बस !importantइसे जोड़ना है।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

यह इनपुट क्षेत्रों से पीले रंग को पूरी तरह से हटा देगा

— डॉन
स्रोत
यह मेरे लिए 1000px के बिना काम करता है, सिर्फ 0 हर जगह; -webkit- बॉक्स-छाया: 0 0 0 0 सफेद इनसेट (महत्वपूर्ण);
— लुइस लोपेज
3

आप अपने फ़ॉर्म तत्वों के नाम की विशेषता को कुछ उत्पन्न होने के लिए भी बदल सकते हैं ताकि ब्राउज़र इसका ट्रैक न रखे। हो सकता है कि फ़ायरफ़ॉक्स 2.x + और google chrome को अधिक समस्या न हो, यदि अनुरोध url समान है। साइन-अप फ़ॉर्म के लिए मूल रूप से नमक अनुरोध परम और नमक क्षेत्र का नाम जोड़ने का प्रयास करें।

हालांकि मुझे लगता है कि स्वत: पूर्ण = "बंद" अभी भी शीर्ष समाधान है :)

— दिमित्रि लखटेन
स्रोत
3

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

जब तक ब्राउज़र विक्रेता ने विशेष रूप से इसे ओवरराइड करने का एक विक्रेता-विशिष्ट तरीका लागू नहीं किया, तब तक आप ऐसी शैलियों के बारे में कुछ नहीं कर सकते हैं जो पहले से ही उपयोगकर्ता के लिए साइट की स्टाइलशीट को ओवरराइड करने के इरादे से हैं। ये आमतौर पर आपके स्टाइलशीट लगाने के बाद लगाए जाते हैं और ! importantओवरराइड को भी अनदेखा कर देते हैं।

— एलन प्लम
स्रोत
3

कभी-कभी आपके पास कोड होने पर कभी-कभी ब्राउज़र पर स्वतः पूर्ण हो जाता है <form> तत्व होता है।

मैंने इसे <input>तत्व में भी डालने की कोशिश की और इसने बेहतर काम किया।

<form autocomplete="off">  AND  <input autocomplete="off">

हालांकि इस विशेषता का समर्थन जारी है, कृपया https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1 पढ़ें

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

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

यहां छवि विवरण दर्ज करें

यह ऐसा करता है ताकि ब्राउज़र को यह पता न चले कि यह किस तरह का क्षेत्र है, इस प्रकार इसे स्वत: पूर्ण करने का प्रयास नहीं किया जाता है।

— andstud.io
स्रोत
इसके बारे में मुझे जो पसंद है वह है ज्यादातर लोग WOULDN'T की सराहना करते हैं कि एक पृष्ठ रीलोड (उदाहरण के लिए एक लंबा पाठ क्षेत्र) में भरे नहीं जा रहे हैं, लेकिन डेवलपर को कुछ तत्वों को (जैसे बैंक कार्ड नंबर) भरे जाने से रोकने की अनुमति देता है। हालांकि, इस विशेषता के लिए समर्थन जारी है
— ल्यूक माधंगा
1

यदि यह इनपुट क्षेत्र में है तो आप "अन-येलो" की कोशिश कर रहे हैं ...

  1. Css के साथ बैकग्राउंड-रंग सेट करें ... मान लें कि #ccc (लाइट ग्रे) है।
  2. मान जोड़ें = "someext", जो अस्थायी "फ़ील्ड" के साथ फ़ील्ड भरता है
  3. (वैकल्पिक) जब आप असली पाठ डालने के लिए जाते हैं तो "लोटेक्स्ट" को स्पष्ट करने के लिए थोड़ी जावास्क्रिप्ट जोड़ें।

तो, यह इस तरह लग सकता है:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— सफ़ेद घोडा
स्रोत
1

यह सफारी और क्रोम दोनों पर समस्या को ठीक करता है

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— अर्जन
स्रोत
1
मेरा मानना ​​है कि यह प्रत्येक सेकंड में 50 बार करने के लिए थोड़ा कठोर नहीं होगा? मुझे पता है कि यह काम करेगा और बहुत धीमा नहीं होगा। लेकिन थोड़ा बहुत लगता है।
— मैथिज सेज
0

आपके द्वारा लिंक किया गया स्क्रीनशॉट कहता है कि WebKit input:-webkit-autofillउन तत्वों के लिए चयनकर्ता का उपयोग कर रहा है । क्या आपने इसे अपने CSS में डालने की कोशिश की है?

input:-webkit-autofill {
    background-color: white !important;
}

अगर वह काम नहीं करता है, तो शायद कुछ भी नहीं होगा। उन क्षेत्रों को उजागर किया जाता है कि उपयोगकर्ता को यह सूचित करने के लिए कि वे निजी जानकारी (जैसे उपयोगकर्ता के घर का पता) के साथ स्वत: पूर्ण हो गए हैं और यह तर्क दिया जा सकता है कि पृष्ठ को छिपाने की अनुमति देना जो सुरक्षा जोखिम की अनुमति दे रहा है।

— benzado
स्रोत
0

formतत्व एक है autocompleteविशेषता आप करने के लिए सेट कर सकते हैं कि off। सीएसएस के रूप में !importantएक संपत्ति के बाद निर्देश यह अतिरंजित होने से रखता है:

background-color: white !important;

केवल IE6 यह समझ में नहीं आता है।

अगर मैं तुम्हें गलत समझा, वहाँ भी outlineसंपत्ति है कि आप उपयोगी मिल सकता है।

— zneak
स्रोत
2
क्रोम महत्वपूर्ण लगता है जब यह इनपुट-फील्ड्स को
— प्रभावित
@ टोरंडी यह उपयोगकर्ता-एजेंट स्टाइलशीट के कारण हो सकता है। उपयोगकर्ता-एजेंट स्टाइलशीट से सेटिंग अंतिम रूप से लागू होनी चाहिए, जब तक कि यह !importantनिर्देश न हो, जिस स्थिति में यह बाकी सब चीजों पर पूर्वता लेता है। आपको अपने उपयोगकर्ता एजेंट स्टाइलशीट की जांच करनी चाहिए (हालांकि मुझे नहीं पता कि इसे कहां खोजना है)।
— zneak
0

मैंने Google टूलबार की स्वतः पूर्ण विशेषता को जावास्क्रिप्ट के साथ अक्षम देखा है। यह कुछ अन्य ऑटोफिल टूल के साथ काम कर सकता है; मुझे नहीं पता कि यह स्वतः पूर्ण में निर्मित ब्राउज़रों के साथ मदद करेगा।

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— एडम
स्रोत
0

बहुत सी चीजों की कोशिश करने के बाद, मैंने काम करने वाले समाधान ढूंढे जो स्वत: स्फूर्त खेतों को काटते थे और उन्हें डुप्लिकेट के साथ प्रतिस्थापित करते थे। संलग्न घटनाओं को ढीला करने के लिए, मैं एक और (थोड़ा लंबा) समाधान के साथ आया।

प्रत्येक "इनपुट" घटना में यह तेजी से सभी शामिल आदानों के लिए "परिवर्तन" घटनाओं को संलग्न करता है। यह परीक्षण करता है कि क्या वे ऑटोफिल किए गए हैं। यदि हाँ, तो एक नया टेक्स्ट ईवेंट भेजें जो ब्राउज़र को यह सोचने के लिए प्रेरित करेगा कि उपयोगकर्ता द्वारा मूल्य बदल दिया गया है, इस प्रकार पीले रंग की पृष्ठभूमि को हटाने की अनुमति मिलती है।

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— अर्नेस्टल्स कार्लसन
स्रोत
0

सभी ब्राउज़र के लिए सरल जावास्क्रिप्ट समाधान:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

क्लोन इनपुट, रिसेट एट्रिब्यूट और ओरिजिनल इनपुट को हाइड करें। IPad के लिए टाइमआउट आवश्यक है

— घुन
स्रोत
0

चूंकि ब्राउज़र पासवर्ड प्रकार के क्षेत्रों की खोज करता है, इसलिए आपके फ़ॉर्म की शुरुआत में एक अन्य फ़ील्ड को एक छिपे हुए फ़ील्ड को शामिल करना है:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— केटी मैक
स्रोत
0

मैंने बहुत सारे सूत्र पढ़े हैं और कोड के इतने सारे टुकड़े आज़माए हैं। उस सभी सामान को इकट्ठा करने के बाद, मैंने लॉगिन और पासवर्ड फ़ील्ड को साफ़ करने और उनकी पृष्ठभूमि को सफेद में रीसेट करने का एकमात्र तरीका निम्नलिखित था:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

टिप्पणी करने के लिए स्वतंत्र महसूस करें, यदि आप कुछ पाते हैं तो मैं सभी वृद्धि के लिए तैयार हूं।

— TwystO
स्रोत
0

स्वत: पूर्ण बंद आधुनिक ब्राउज़रों द्वारा समर्थित नहीं है। मेरे द्वारा पाया गया स्वत: पूर्ण हल करने का सबसे आसान तरीका HTML और JS के साथ थोड़ा सा ट्रैक था। पहली बात यह है कि HTML में इनपुट के प्रकार को 'पासवर्ड' से 'टेक्स्ट' में बदला जाए।

<input class="input input-xxl input-watery" type="text" name="password"/>

विंडो लोड होने के बाद स्वतः पूर्ण प्रारंभ होता है। ठीक है। लेकिन जब आपके क्षेत्र का प्रकार 'पासवर्ड' नहीं है, तो ब्राउज़र को पता नहीं है कि इसे किस फ़ील्ड को पूरा करना है। तो, फार्म क्षेत्रों पर कोई स्वत: पूर्ण नहीं होगा।

उसके बाद, ईवेंट फ़ोकसिन को पासवर्ड फ़ील्ड पर, पूर्व के लिए बाइंड करें। बैकबोन में:

'focusin input[name=password]': 'onInputPasswordFocusIn',

में onInputPasswordFocusIn, बस पासवर्ड के लिए अपने क्षेत्र के प्रकार बदलने के लिए, सरल चेक द्वारा:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

यह `है!

UPD: यह चीज़ अक्षम JavaSciprt के साथ काम नहीं करती है

2018 में UPD। कुछ मज़ेदार ट्रिक भी मिले। इनपुट क्षेत्र के लिए आसानी से सेट करें, और इसे फ़ोकस इवेंट पर निकालें। पहले ब्राउज़र को ऑटोफ़िलिंग फ़ील्ड से रोकें, दूसरा इनपुट डेटा की अनुमति देगा।

— volodymyr3131
स्रोत
वैसे स्वत: पूर्णता मानक का हिस्सा है, हालांकि इसका उपयोग और कार्यान्वयन भिन्न हो सकते हैं। इसके अलावा, IE में इनपुट प्रकारों को बदलना शानदार तरीके से विफल हो जाता है, यही वजह है कि jQuery इसे ब्लॉक करता है, लेकिन आम तौर पर यह एक अच्छा विचार नहीं है यदि आप IE डेवलपर.
— mozilla.org/en-US/docs/Web/Security/…
@casraf क्षमा करें, यह standart का एक हिस्सा है, लेकिन यह सभी आधुनिक ब्राउज़रों में काम नहीं करता है जैसा कि यह होना चाहिए, इसलिए यह उस चीज को नहीं करेगा जिसके लिए इसका आविष्कार किया गया था। EDGE में यह ठीक काम करता है, पिछले संस्करणों के बारे में कुछ भी नहीं बता सकता (
— volodymyr3131
सच है, यह हर जगह लागू नहीं है। समस्या अभी भी बनी हुई है - आप 11 का समर्थन करने से पहले कितनी दूर IE का समर्थन करना चाहते हैं इसके आधार पर, मुझे विश्वास नहीं है कि आप इनपुट प्रकार को बदल सकते हैं। यदि आप पुराने संस्करणों के बारे में चिंतित नहीं हैं, तो आप उपयोग कर सकते हैं autocomplete=off, क्योंकि यह FF, क्रोम में थोड़ी देर के लिए काम करता है, और IE पिछले संस्करण के रूप में या तो
— casraf
मैंने इनपुट और फ़ॉर्म दोनों के लिए स्वत: पूर्ण = बंद का उपयोग करने की कोशिश की है, और क्रोम अभी भी साइनअप और साइनइन फॉर्म डेटा भरते हैं (और यह केवल कुछ प्रकार का अजीब जादू है, क्योंकि टिप्पणियों के आधार पर, कुछ मामलों में यह काम करता है, और कुछ यह नहीं =)
— volodymyr3131
मुझे पता है, इन मानकों का वास्तव में लगातार पालन नहीं किया जा रहा है। यह शर्म की बात है, हमारे जीवन को कठिन बनाता है :(
— कैसरफ
0

कृपया अपने इनपुट टैग में स्वत: पूर्ण = "कोई नहीं" के साथ प्रयास करें

यह मेरे लिए काम करता है

— वायोडाय तमरी
स्रोत
0

मुझे टेक्स्ट कलर को कुछ गहरे रंग में बदलना था (देखें StackOverflow Dark theme colours)।

इसलिए @ तमसे पापा, @MCBL और @ डॉन के समाधान के संकर के साथ समाप्त हुआ:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— आंद्रेई
स्रोत
-3

क्यों नहीं इसे अपने सीएसएस में रखें:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

अपने मुद्दे का ध्यान रखना चाहिए। हालाँकि यह एक प्रयोज्य मुद्दा उठाता है क्योंकि अब उपयोगकर्ता यह नहीं देख सकता है कि वह जिस तरह से / वह करने के लिए उपयोग किया जाता है उस रूप में स्वत: पूर्ण था।

[संपादित करें] इसे पोस्ट करने के बाद मैंने देखा कि एक समान उत्तर पहले ही दिया गया था और आपने इस पर टिप्पणी की कि यह काम नहीं किया। मैं यह नहीं देखता कि जब मैंने परीक्षण किया तो यह काम क्यों नहीं किया।

— क्रिस
स्रोत
क्रोम और सफारी दोनों में काम नहीं करता है। शैली है input:-webkit-autofillऔर input --webkit-autocompleteबस मौजूद नहीं है
— ruruskyi
@EliseuMonar: मुझे पूरा यकीन है कि मैं झूठ नहीं बोल रहा था, लेकिन मैंने इसका परीक्षण कैसे या कहाँ किया, इसका विवरण याद नहीं है। कोड ही संभवतः मेमोरी से टाइप किया गया था, कॉपी / पेस्ट नहीं किया गया था, इसलिए स्वतः पूर्ण बनाम ऑटोफिल? मुझे नही पता।
— क्रिस
-3

यहाँ असली समस्या यह है कि वेबकिट (सफारी, क्रोम, ...) में एक बग है। जब पृष्ठ पर एक से अधिक [प्रपत्र] होते हैं, तो प्रत्येक में एक [इनपुट प्रकार = "पाठ" नाम = "फू" ...] (अर्थात विशेषता 'नाम' के समान मान के साथ), तब जब उपयोगकर्ता वापस लौटता है पृष्ठ पर ऑटोफिल एफआरएसटी [प्रपत्र] के इनपुट क्षेत्र में पृष्ठ पर किया जाएगा, न कि उस [प्रपत्र] में जिसे भेजा गया था। दूसरी बार, NEXT [फॉर्म] को ऑटोफिल किया जाएगा, और इसी तरह। केवल [प्रपत्र] एक इनपुट टेक्स्ट फ़ील्ड के साथ SAME नाम प्रभावित होगा।

यह वेबकिट डेवलपर्स को सूचित किया जाना चाहिए।

ओपेरा सही [फॉर्म] को ऑटोफिल करता है।

फ़ायरफ़ॉक्स और IE ऑटोफिल नहीं करता है।

तो, मैं फिर कहता हूं: यह वेबकिट में एक बग है।

— प्रति लिंडबर्ग
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.