2012-03-17 18 views
8

एक लंबे संघर्ष के बाद, मैं अंत में बाहर हर ब्राउज़र में स्वत: भरण स्टाइल स्पष्ट करने के लिए एक ही रास्ता मिल गया है भरा कर दिया गया हैका पता लगा रहा है जब स्वत: भरण

$('input').each(function() { 
    var $this = $(this); 

    $this.after($this.clone()).remove(); 
}); 

समस्या है, यह में नहीं चलाया जा सकता load, क्योंकि इस तथ्य के बाद खेतों की ऑटोफिलिंग कुछ समय बाद होती है। अभी मैं 100 मिलीसेकंड का समय समाप्त पर यह चल रहा हूँ load के बाद:

// Kill autofill styles 
$(window).on({ 
    load: function() { 
     setTimeout(function() { 
      $('.text').each(function() { 
       var $this = $(this); 

       $this.after($this.clone()).remove(); 
      }); 
     }, 100); 
    } 
}); 

और कहा कि यहां तक ​​कि सिस्टम की धीमी पर सुरक्षित लगता है, लेकिन यह वास्तव में सुंदर नहीं है। क्या कोई भरोसेमंद घटना है या जांच है कि मैं यह देखने के लिए कर सकता हूं कि ऑटोफिल पूरा हो गया है या नहीं?

संपादित करें: यह ऑटोफिल है।

autofill http://dl.dropbox.com/u/2463964/autofill.png

+0

बस उत्सुक, आप ऑटोफिल्ल्ड फॉर्म फ़ील्ड को क्यों साफ़ करना चाहते हैं? – j08691

+0

@ j08691: मैं ऑटोफिल्ल्ड फ़ील्ड को साफ़ नहीं करना चाहता (यह ऐसा नहीं है), मैं बदसूरत पीले रंग की पृष्ठभूमि को साफ़ करना चाहता हूं जो सीएसएस में भी अपरिवर्तनीय है। – Ryan

+1

"ऑटोफिल" क्या है? –

उत्तर

2

वहाँ एक बग http://code.google.com/p/chromium/issues/detail?id=46543#c22 पर अधिक खोलने के लिए इस से संबंधित है, ऐसा लगता है कि यह अंततः संभव हो सकता है (चाहिए) हो सकता है सिर्फ एक !important चयनकर्ता, के साथ डिफ़ॉल्ट स्टाइल से अधिक लिखने के लिए है जो सबसे सुरुचिपूर्ण समाधान होगा। अभी के लिए

input { 
    background-color: #FFF !important; 
} 

हालांकि बग अभी भी खुला है और ऐसा लगता है अपने hackish समाधान की तरह क्रोम के लिए एकमात्र समाधान है, लेकिन एक) क्रोम के लिए समाधान setTimeout और ख की जरूरत नहीं है: कोड की तरह कुछ होगा) ऐसा लगता है जैसे फ़ायरफ़ॉक्स ध्वज या Override browser form-filling and input highlighting with HTML/CSS में वर्णित उच्च प्राथमिकता वाले सीएसएस चयनकर्ता का सम्मान कर सकता है। क्या यह मदद करता है?

+0

दुर्भाग्यवश, इसे वास्तव में 'सेटटाइमआउट' की आवश्यकता है, और फ़ायरफ़ॉक्स में एक ही समस्या है। मेरा विश्वास करो, मैं उन दोनों के बदलावों को आजमाने की कोशिश कर रहा हूं जैसा कि हम बोलते हैं :) – Ryan

+0

अंत में जिस थ्रेड पर मैंने निपटाया था, उसके पास एक समाधान भी है जो काम के रूप में उल्लेख किया गया है, जो इनपुट का उपयोग करना है: फोकस चयनकर्ता और अधिभार का उपयोग करें बदले में प्रत्येक फॉर्म तत्व पर ध्यान केंद्रित करने के लिए जावास्क्रिप्ट। – conartist6

+0

मैंने इसे देखा, लेकिन विचित्र रूप से, यह मेरे लिए काम नहीं कर रहा है। मैं क्रोम कैनरी का उपयोग कर रहा हूं, तो शायद * वह * "बग" तय किया गया था :) – Ryan

12

आप Chrome या Safari का उपयोग कर रहे हैं, तो आप input:-webkit-autofill सीएसएस चयनकर्ता का उपयोग autofilled क्षेत्रों पाने के लिए कर सकते हैं।

उदाहरण का पता लगाने कोड:

setInterval(function() { 
    var autofilled = document.querySelectorAll('input:-webkit-autofill'); 
    // do something with the elements... 
}, 500); 
+0

मुझे उस चयनकर्ता से अवगत है। हालांकि, मैं न तो अपने कोड में 'setInterval' और न ही 'setTimeout' चाहता हूं। – Ryan

+1

यह एफएआर द्वारा सबसे अच्छा समाधान है जो मैंने क्रोम और ऑटोफिल इनपुट की समस्या को देखा है। इनपुट: -वेबकिट-ऑटोफिल मतदान और सेटटाइमआउट() इत्यादि से बेहतर तरीका है। वास्तव में आपको इस लंबे समय तक चलने वाले मुद्दे का उत्तर देने के लिए बहुत कुछ धन्यवाद! – ChrisN

+3

@ChrisN, यह उत्तर 'setInterval' का उपयोग करता है। – Ryan

1

मैं तुम्हें पहली जगह में स्वत: भरण परहेज इसके बजाय ब्राउज़र

<form autocomplete="off"> 

अधिक जानकारी चाल करने के लिए प्रयास करने का प्रस्ताव: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

आप चाहते हैं स्वत: भरण व्यवहार लेकिन परिवर्तन रखना स्टाइल, शायद आप ऐसा कुछ कर सकते हैं (jQuery):

$(document).ready(function() { 
    $("input[type='text']").css('background-color', 'white'); 
}); 
+1

कृपया टिप्पणियां पढ़ें। हमने पाया है कि मैं * स्वत: पूर्ण बंद नहीं करना चाहता *। 'पृष्ठभूमि-रंग' को 'सफेद' पर सेट करने के लिए, यह काम नहीं करता है। यही कारण है कि मुझे कामकाज की जरूरत है। – Ryan

+0

बस पढ़िए, क्षमा करें @minitech मुझे खेद है कि मुझे सच में लगता है कि आपको टाइमआउट की आवश्यकता होगी, क्योंकि फॉर्म थोड़ा सा ब्राउज़र के बाद स्वयं भर जाता है, डीओएम –

-1
$(window).load(function() 
{ 
    if ($('input:-webkit-autofill')) 
    { 
     $('input:-webkit-autofill').each(function() 
     { 
      $(this).replaceWith($(this).clone(true,true)); 
     }); 
     // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING 
    } 
}); 

मैंने देखा कि आपके द्वारा पोस्ट किया गया jQuery समाधान संलग्न घटनाओं की प्रतिलिपि नहीं करता है। जिस विधि को मैंने पोस्ट किया है वह jQuery 1.5+ के लिए काम करता है और पसंदीदा समाधान होना चाहिए क्योंकि यह प्रत्येक ऑब्जेक्ट के लिए संलग्न ईवेंट को बरकरार रखता है। यदि आपके पास सभी प्रारंभिक चर के माध्यम से लूप का समाधान है और उन्हें फिर से प्रारंभ करना है तो एक पूर्ण 100% काम कर रहे jQuery समाधान उपलब्ध होंगे, अन्यथा आपको आवश्यक चर सेट को फिर से शुरू करना होगा।

उदाहरण के लिए आप: var foo = $ ('# foo');

तो आपको कॉल करना होगा: foo = $ ('# foo');

क्योंकि मूल तत्व हटा दिया गया था और अब एक क्लोन इसके स्थान पर मौजूद है।

+0

नहीं, यह निश्चित रूप से मेरा पसंदीदा समाधान नहीं है, क्योंकि ए) ब्राउज़र स्नीफिंग का उपयोग करता है, जो गलत है क्योंकि फ़ायरफ़ॉक्स में एक ही बग है और बी) यह अभी भी काम नहीं करता है, क्योंकि कोई टाइमआउट नहीं है। – Ryan

+0

फ़ायरफ़ॉक्स के किस संस्करण में बग है? तो मैं तदनुसार मेरी टिप्पणी संपादित कर सकता हूं, क्योंकि मेरा वर्तमान संस्करण उस व्यवहार को प्रदर्शित नहीं करता है। यदि आपको स्नीफिंग ब्राउज़ करना पसंद नहीं है तो यह देखने के लिए कि क्या वह तत्व मौजूद है या नहीं, तो सिर्फ एक कथन चलाएं। मुख्य कारण आपको किसी प्रकार की जांच की आवश्यकता है क्योंकि कुछ चरों को फिर से शुरू करने की आवश्यकता हो सकती है क्योंकि मूल प्रतियां मौजूद नहीं हैं। इसके अलावा, अगर आपको टाइमआउट की ज़रूरत है तो प्लग इन करना आसान है, लेकिन मेरे बिना किसी उपस्थित होने के बिना बेकार तरीके से काम किया है, इसलिए मैंने इसे अपनी प्रतिक्रिया से बाहर कर दिया। –