मैं अपनी साइट के इनपुट बॉक्स को पीले करने से Chrome को कैसे रोकूं?

Question

एक फॉर्म सबमिशन, पोस्ट-वैलिडेशन पर अन्य टेक्स्ट और विज़ुअल ऐड्स के बीच, मुझे इंटरेक्टिव एरिया पर ध्यान देने के लिए अपने इनपुट बॉक्स को लाल रंग से रंगना है।

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

तो उस मुद्दे से बचने की कोशिश करने के लिए, क्या इनपुट बॉक्स को फिर से रंगने से क्रोम को रोकने का कोई सरल तरीका है?

[संपादित करें] मैंने नीचे दिए गए महत्वपूर्ण सुझाव की कोशिश की और इसका कोई प्रभाव नहीं पड़ा। मैंने अभी तक Google टूलबार की जाँच नहीं की है कि क्या महत्वपूर्ण विशेषता इसके लिए काम करेगी।

जहाँ तक मैं बता सकता हूँ, स्वतः पूर्ण विशेषता (जो काम करता है) का उपयोग करने के अलावा और कोई साधन नहीं है।

Comments

यह क्रोम में केवल एक मुद्दा नहीं है। अन्य ब्राउज़रों के लिए Google टूलबार इनपुट फ़ील्ड के समान "पीलापन" करता है।

— कार्लटन जेनके

मैंने आपके लिए एक उत्तर दिया है जो नीचे काम करता है।

— जॉन लेडिग्रेन 22

मुझे समझ में नहीं आता कि हर कोई रूपरेखा के बारे में क्यों बात कर रहा है: कोई नहीं, सवाल येलो बैकग्राउंड के बारे में है, न कि रूपरेखा के बारे में। और स्वत: पूर्ण विशेषता सेट बंद करने से समस्या ठीक नहीं होगी, क्योंकि davebug ने कहा कि वह काम करने के लिए स्वत: पूर्ण चाहता है, बस पीले रंग की पृष्ठभूमि नहीं।

Answer 1

मैं जानता हूँ कि फ़ायरफ़ॉक्स में आप स्वतः पूर्ण कार्यक्षमता को निष्क्रिय करने के लिए विशेषता स्वतः पूर्ण = "बंद" का उपयोग कर सकते हैं। यदि यह क्रोम में काम करता है (परीक्षण नहीं किया गया है), तो त्रुटि का सामना करने पर आप इस विशेषता को सेट कर सकते हैं।

यह एक एकल तत्व दोनों के लिए उपयोग किया जा सकता है

<input type="text" name="name" autocomplete="off">

... साथ ही पूरे फॉर्म के लिए

<form autocomplete="off" ...>

Comments

"अगर / जब कोई त्रुटि उत्पन्न होती है, तो स्वत: पूर्ण विशेषता को बंद करने की क्षमता की जांच करने जा रहा हूं, लेकिन यह किसी पृष्ठ पर एकल प्रभावित इनपुट के लिए स्वतः-पूर्ण रूप से प्रोग्राम बंद करने के लिए कोडिंग का एक जटिल बिट है।"

— डेव रटलेज

हे ... हाँ, धन्यवाद, हालांकि मुझे लगता है कि मुझे अभी भी क्रोम में जांचने की आवश्यकता है, है ना?

— डेव रुतलेज

रेल के सरल रूप का उपयोग करने वाले लोगों के लिए<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>

— कार्बन

यह कहने में खेद है कि इससे मुझे मदद नहीं मिली

— M.Islam

Answer 2

CSS आउटलाइन प्रॉपर्टी को कोई नहीं पर सेट करें।

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

उन मामलों में जहां ब्राउज़र पृष्ठभूमि रंग जोड़ सकता है और साथ ही यह कुछ इस तरह से तय किया जा सकता है

:focus { background-color: #fff; }

Comments

पृष्ठभूमि? मुझे पता नहीं था कि Chrome ने पृष्ठभूमि रंग भी जोड़ा है? यदि हां, तो इसे कुछ इस तरह से तय किया जा सकता है:focus { background-color: #fff; }

— जॉन लेडग्रेन

सीएसएस के साथ रूपरेखा को मारना पीलापन को रोक सकता है लेकिन यह वास्तविक ऑटोफिलिंग को रोक नहीं सकता है। यदि आप ऐसा करना चाहते हैं, तो स्वत: पूर्ण विशेषता का उपयोग करना महत्वपूर्ण है, गैर-मानक या नहीं।

— टॉम बॉटल

@ पर्व सही, यह सही जवाब नहीं है, लेकिन यह निश्चित रूप से एक समान समस्या हल करता है

— डेविड लॉसन

टेबलेट और सामान के साथ काम करते समय ध्यान रखें, डिफ़ॉल्ट एंड्रॉइड ब्राउज़र बिना रूपरेखा के उपयोग करना थोड़ा मुश्किल है । आसान पर्याप्त हालांकि :) गैर मोबाइल ब्राउज़र पर लागू करने के लिए

— टिम पोस्ट

एक छोटा सुधार: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }

— फेलिप लीमा

Answer 3

यह वही है जो आपकी तलाश में है!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Comments

यह एक महान हैक है। साभार

— जेसन

मैं उस पर भी ध्यान केंद्रित करूंगा: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }

— StephanieQ

हाय @JStormThaKid, मैंने इसका इस्तेमाल किया ..., लेकिन सही इनपुट के लिए काम नहीं किया ... कृपया इसका उत्तर दें ...

— मिठु

वास्तव में पूछे गए प्रश्न का उत्तर देने के लिए धन्यवाद! मैंने उम्मीद खोना लगभग शुरू कर दिया था।

— २१:२१ पर बीटर्नोन

सर्वश्रेष्ठ उत्तर के यहाँ, मैं अभी भी स्वत: पूर्ण गूगल, चाहता था इसलिए धन्यवाद

— Spangle

Answer 4

थोड़ा jQuery का उपयोग करके आप स्वत: पूर्ण कार्यक्षमता को बरकरार रखते हुए क्रोम की स्टाइलिंग को हटा सकते हैं। मैंने इसके बारे में एक छोटी पोस्ट यहाँ लिखी है: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}

Comments

संकेत के लिए धन्यवाद! हालांकि फॉर्म पोस्ट करने के बाद, बैक बटन पर क्लिक करने पर, पीला हाइलाइट वापस आ गया। मैंने इसे कवर करने के लिए आपका स्निपेट (मेरा उत्तर देखें) बढ़ाया है।

— 321X

+1 @ बेंजामिन अच्छा समाधान, यह पीले रंग में थोड़ा सा चमकता है लेकिन यह अंत में ठीक हो जाता है;)

— इमे

Answer 5

सभी क्षेत्रों के लिए सीमा हटाने के लिए आप निम्नलिखित का उपयोग कर सकते हैं:

*:focus { outline:none; }

चुनिंदा फ़ील्ड के लिए बॉर्डर को हटाने के लिए इस वर्ग को अपने इच्छित इनपुट फ़ील्ड पर लागू करें:

.nohighlight:focus { outline:none; }

आप अपनी इच्छानुसार सीमा बदल सकते हैं:

.changeborder:focus { outline:Blue Solid 4px; }

(बिल बेकमैन से: क्रोम का उपयोग करके सक्रिय फ़ील्ड के चारों ओर क्रोम की स्वचालित सीमा को ओवरराइड करें )

Answer 6

हां, यह एक प्रमुख सिरदर्द होगा, जो मेरी राय में वापसी के लायक नहीं है। हो सकता है कि आप अपनी यूआई रणनीति को थोड़ा मोड़ सकते हैं, और बॉक्स को लाल रंग में रंगने के बजाय, आप सीमाओं को लाल रंग में रंग सकते हैं, या उसके बगल में एक छोटा लाल टेप लगा सकते हैं (जैसे कि gmails "लोड हो रहा है" टेप) जो बॉक्स में होने पर दूर हो जाता है ध्यान देते हैं।

Answer 7

यह jQuery के साथ केक का एक टुकड़ा है:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

या यदि आप थोड़ा अधिक चयनात्मक होना चाहते हैं, तो चयनकर्ता के लिए एक वर्ग नाम जोड़ें।

Answer 8

मेरी राय में सरल तरीका है:

1. Http://www.quirksmode.org/js/detect.html प्राप्त करें

2. इस कोड का उपयोग करें:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };

Answer 9

@ बैंजामिन को उनके समाधान को लागू करने के बाद मुझे पता चला कि बैक बटन दबाने पर भी मुझे पीला हाइलाइट मिलेगा।

इस पीले हाइलाइट को वापस आने से रोकने के लिए किसी तरह मेरा समाधान निम्नलिखित jQuery जावास्क्रिप्ट को लागू करने से है:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('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);
            });
        }
    });
</script>

आशा है कि यह किसी की मदद करता है !!

Answer 10

यह काम। सबसे अच्छा, आप rgba मानों का उपयोग कर सकते हैं (बॉक्स-शैडो इनसेट हैक rgba के साथ काम नहीं करता है)। यह @ बेंजामिन के उत्तर का एक मामूली मोड़ है। मैं $ (विंडो) (। लोड) () के बजाय $ (डॉक्यूमेंट) (।) () का उपयोग कर रहा हूं। यह मेरे लिए बेहतर काम करता है - अब बहुत कम FOUC है। मुझे विश्वास नहीं है कि $ (दस्तावेज़) का उपयोग करने के नुकसान और नुकसान पहले से ही हैं ()।

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

Answer 11

आज के संस्करणों के लिए, यह दो लॉगिन इनपुटों में से एक में रखे जाने पर भी काम करता है। संस्करण 40+ और देर से फ़ायरफ़ॉक्स समस्या को भी ठीक करें।

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

Answer 12

input:focus { outline:none; }

यह मेरे लिए बहुत अच्छा काम करता है लेकिन आपकी साइट पर चीजों को एक समान रखने की संभावना से अधिक आपकी पाठ्यपुस्तक के लिए अपने सीएसएस में इसे शामिल करना चाहते हैं:

textarea:focus { outline:none; }

यह भी सबसे स्पष्ट लग सकता है लेकिन शुरुआती लोगों के लिए आप इसे इस तरह से रंग में सेट कर सकते हैं:

input:focus { outline:#HEXCOD SOLID 2px ; }

Answer 13

अगर मुझे सही तरीके से याद है, तो इनपुट्स की पृष्ठभूमि के रंग के लिए स्टाइलशीट में एक महत्वपूर्ण नियम Google टूलबार स्वतः पूर्ण हो जाएगा - संभवतः Chrome का भी यही सच होगा।