ब्राउज़र ऑटोफिल का पता लगाना

Question

आप कैसे बता सकते हैं कि किसी ब्राउज़र ने ऑटो को टेक्स्ट-बॉक्स भर दिया है? विशेष रूप से उपयोगकर्ता नाम और पासवर्ड बक्से के साथ जो पृष्ठ लोड के आसपास ऑटोफिल करते हैं।

मेरा पहला सवाल यह है कि यह पेज लोड अनुक्रम में कब होता है? यह पहले या बाद में है।

दूसरी बात कि मैं यह जानने के लिए तर्क का उपयोग कैसे कर सकता हूं कि क्या यह हुआ? यह नहीं है कि मैं इसे होने से रोकना चाहता हूं, बस घटना में हुक। अधिमानतः कुछ इस तरह से:

if (autoFilled == true) {

} else {

}

यदि संभव हो तो मुझे आपका जवाब दिखाते हुए jsfiddle देखना अच्छा लगेगा।

संभव डुप्लिकेट

ब्राउज़र पासवर्ड ऑटोफिल के लिए डोम घटना?

ब्राउज़र ऑटोफिल और जावास्क्रिप्ट घटनाओं को ट्रिगर किया

- लेकिन ये सवाल वास्तव में यह नहीं समझाते हैं कि कौन सी घटनाओं को ट्रिगर किया जाता है, वे केवल पाठ-बॉक्स (प्रदर्शन के लिए अच्छा नहीं!) को लगातार दोहराते हैं।

Comments

चेकिंग में कुछ माइक्रोसेकंड लगते हैं, जबकि इंटरवल हर 100 मिलीसेकंड या तो चेक फायरिंग करेगा ... यह कैसा प्रदर्शन है? यदि ब्राउज़र द्वारा गोलीबारी की गई घटना मौजूद है तो मुझे यकीन है कि उन्होंने इसका उपयोग किया होगा।

— एसेलिजा

मैं देख रहा हूं कि आपका क्या मतलब है, लेकिन यह मेरे सवाल के पहले भाग पर निर्भर करता है कि क्या जावास्क्रिप्ट के बारे में भी पता है कि अभी-अभी परिवर्तन हुआ है (उदाहरण के लिए पहले ही दस्तावेज़। पहले से ही)

— अपरिभाषित

Chrome / WebKit का सबसे अच्छा समाधान DOM चयनकर्ता का उपयोग करना है: document.querySelectorAll ('input: -webkit-autofill'); एक छोटी देरी के बाद setTimeout (... यहां कोड ... 250);

— क्रिस एनएन

मूल रूप से मैं ऑटो लॉगिन उपयोगकर्ता को चाहता हूं यदि यह ऑटोफिल्ड है, तो पागल कष्टप्रद ओटी लॉग इन करें जब यह स्वचालित रूप से लॉग आउट हो जाता है।

— मुहम्मद उमेर

@ChrisN आपकी टिप्पणी वास्तव में मुझे एक (सरल) समाधान मिल गया है। मैं इसे एक जवाब के रूप में नहीं देखता, हालांकि! इसे एक के रूप में पोस्ट करें और मुझे पिंग करें, इसलिए मैं इसे धन्यवाद में बढ़ा सकता हूं।

— एथन कमिंसकी

Answer 1

समस्या अलग-अलग ब्राउज़र द्वारा अलग-अलग नियंत्रित की जाती है। कुछ परिवर्तन घटना को भेजते हैं, कुछ नहीं। तो यह एक घटना पर हुक करने के लिए लगभग असंभव है जो कि ट्रिगर होता है जब ब्राउज़र एक इनपुट फ़ील्ड को स्वत: पूर्ण करता है।

• विभिन्न ब्राउज़रों के लिए इवेंट ट्रिगर बदलें:

  • उपयोगकर्ता नाम / पासवर्ड फ़ील्ड के लिए:

    1. फ़ायरफ़ॉक्स 4, आईई 7, और आईई 8 परिवर्तन घटना को नहीं भेजते हैं।
    2. सफारी 5 और क्रोम 9 बदलाव की घटना को दूर करते हैं।

  • अन्य फ़ॉर्म फ़ील्ड के लिए:

    1. IE 7 और IE 8 परिवर्तन घटना नहीं भेजते हैं।
    2. फ़ायरफ़ॉक्स 4 परिवर्तन परिवर्तन घटना को भेजता है जब उपयोगकर्ता सुझावों की एक सूची से एक मूल्य का चयन करते हैं और क्षेत्र से बाहर टैब करते हैं।
    3. Chrome 9 परिवर्तन ईवेंट को नहीं भेजता है।
    4. सफारी 5 परिवर्तन घटना को भेजती है।

आप सबसे अच्छा विकल्प या तो स्वत: पूर्ण को अक्षम करने के लिए अपने फॉर्म का उपयोग कर autocomplete="off"रहे हैं या नियमित अंतराल पर सर्वेक्षण करें कि क्या यह भरा हुआ है।

आपके प्रश्न पर यह भरा गया है या दस्तावेज़ से पहले ही। पहले से ही यह फिर से ब्राउज़र से ब्राउज़र और यहां तक ​​कि संस्करण से संस्करण तक भिन्न होता है। उपयोगकर्ता नाम / पासवर्ड फ़ील्ड के लिए केवल तभी जब आप उपयोगकर्ता नाम पासवर्ड फ़ील्ड भरते हैं। यदि आप किसी भी घटना में संलग्न होने का प्रयास करते हैं तो कुल मिलाकर आपके पास एक बहुत ही गन्दा कोड होगा।

आप इस HERE पर एक अच्छी रीडिंग ले सकते हैं

Comments

कृपया ध्यान दें कि स्वतः पूर्ण और ऑटोफिल के बीच अंतर है। ओपी विशेष रूप से पेज लोड पर सहेजे गए लॉगिन विवरण भरने वाले ब्राउज़रों का उल्लेख कर रहा है।

— रोबर्ट जूल

एक सामान्य हैक पेज के कुछ महत्वपूर्ण भाग पर एक मौसेंटर है। घटना बटन या कुछ इस तरह के उपयोगकर्ता के सिर के रूप में ट्रिगर हो जाती है।

— ब्राइस

@ व्यक्तिगत रूप से मैं एक 'कलंक' की घटना के साथ जाऊंगा क्योंकि ऑटोफिल आपके द्वारा इनपुट क्षेत्र में प्रवेश करने के बाद कुछ होता है। जाहिर है कि यह आदर्श नहीं है, लेकिन ऊपर सूचीबद्ध ब्राउज़रों के लिए यह एक बहुत ही मददगार हो सकता है

— JakeJ

inputघटना को मत भूलना । यही कारण है कि क्रोम स्वत: पूर्ण (और शायद ऑटोफिल के रूप में अच्छी तरह से, अगर क्रोम के पास है, तो मैं हमेशा इस सामान को बंद कर देता हूं)।

— TJ Crowder

मेरे एक लाइन उत्तर को देखें यदि आप जानना चाहते हैं कि क्या टेक्स्ट बॉक्स में मूल्य Google क्रोम स्वत: पूर्ण था।

— ThdK

Answer 2

WebKit ब्राउज़रों के लिए समाधान

MDN डॉक्स के लिए : -webkit-autofill CSS pseudo-class:

जब कोई तत्व ब्राउजर द्वारा अपने मूल्य को स्वत: पूर्ण करता है तो वह -webkit-autofill CSS pseudo-class मेल खाता है

एड होते ही हम वांछित तत्व पर एक शून्य संक्रमण सीएसएस नियम को परिभाषित कर सकते हैं । जेएस तब घटना पर हुक करने में सक्षम होगा ।<input>:-webkit-autofillanimationstart

Klarna UI टीम को श्रेय । उनका अच्छा कार्यान्वयन यहाँ देखें:

• सीएसएस नियम
• जेएस हुक

Comments

यह अब तक का सबसे अच्छा समाधान है! इसके लिए कुदोस से लेव। कर्ण यूआई के समाधान को साझा करने के लिए धन्यवाद ... जब तक मुझे यह नहीं मिला तब तक मेरे लिए और कुछ भी काम नहीं किया है। जीवन रक्षक!

— ब्रैडेन रॉकवेल नेपियर

सीएसएस के साथ-साथ सीएसएस नियम यहाँ github.com/klarna/ui/blob/v4.10.0/Field/styles.scss#L181-L189 की भी आवश्यकता है

— user1069816

यह मेरे लिए निर्दोष काम किया! सटीक दृष्टिकोण जानने के लिए इसके साथ थोड़ा खेलने की जरूरत है। आप Klarna टीम धन्यवाद

— प्रीतीश

Answer 3

यह मेरे लिए नवीनतम फ़ायरफ़ॉक्स, क्रोम और एज में काम करता है:

$('#email').on('blur input', function() {
    ....
});

Comments

'input'! यह मेरे लिए सबसे आसान समाधान था, लेकिन मैंने केवल ऑटोफिल के लिए परीक्षण किया, ऑटोफिल से नहीं।

— ग्रीनराकोन 23

कलंक मेरे लिए कुछ ऑटो पूर्ण ऐड-ऑन

— पाथफाइंडर

हर कीप पर इनपुट ट्रिगर होगा। यदि आप सर्वर कॉल करते हैं, तो यह अक्सर ट्रिगर हो सकता है।

— रिज्किट

महान समाधान! यह ईवेंट, उपयोगकर्ता द्वारा और ब्राउज़र द्वारा ऑटोफिल के साथ समस्या को हल करता है।

— पेट्र Hladí

Answer 4

Google क्रोम स्वतः पूर्ण के लिए, इसने मेरे लिए काम किया:

if ($("#textbox").is(":-webkit-autofill")) 
{    
    // the value in the input field of the form was filled in with google chrome autocomplete
}

Comments

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

— पेरोजो

इस दृष्टिकोण में त्रुटि है: "सिंटैक्स त्रुटि, अपरिचित अभिव्यक्ति: असमर्थित छद्म:

— -webkit-autofill

क्रोम के साथ-साथ 2020 तक काम नहीं करने पर भी बिना मान्यता के त्रुटि को सुधारता है: असमर्थित छद्म: -वेबकिट-ऑटोफिल

— सिंह

Answer 5

बस अगर कोई व्यक्ति एक समाधान की तलाश में है (जैसा कि मैं आज था), एक ब्राउज़र ऑटोफिल परिवर्तन को सुनने के लिए, यहां एक कस्टम jquery विधि है जिसे मैंने बनाया है, बस इनपुट में एक परिवर्तन श्रोता को जोड़ते समय प्रस्ताव को सरल बनाने के लिए:

    $.fn.allchange = function (callback) {
        var me = this;
        var last = "";
        var infunc = function () {
            var text = $(me).val();
            if (text != last) {
                last = text;
                callback();
            }
            setTimeout(infunc, 100);
        }
        setTimeout(infunc, 100);
    };

आप इसे इस तरह कह सकते हैं:

$("#myInput").allchange(function () {
    alert("change!");
});

Comments

मेरे लिए किसी कारण से, यह कोड पृष्ठ पुनर्निर्देशित नहीं कर रहा है (जब मैं आवेदन के लॉगआउट करता हूं और लॉगिन पृष्ठ पर पुनः निर्देशित होता हूं जहां ऑटोफिल होता है)। हालांकि यह पेज रिफ्रेश पर काम करता है।

— विश्वकुमार

जो काफी मोबाइल बैटरी ड्रेनर जैसा दिखता है: /

— स्टीफन फिस्क

@StefanFisk - वास्तव में ऐसा नहीं है। ब्राउज़र पेज के JS स्तर पर एक साधारण दोहराव वाला टाइमर सेट आपकी बैटरी पर प्रभाव डालने के लिए पर्याप्त नहीं है, क्योंकि अधिकांश वेब पेजों में बहुत कुछ चल रहा है .... आपको वास्तव में लगता है कि google.com कोई आवर्तक टाइमर सेट नहीं करता है? यदि मैं जेएस के साथ एक वेब पेज जो एक उपयोगकर्ता की बैटरी नालियों के साथ प्रोग्राम कर सकता है, तो यह एक शक्ति प्रबंधन दोष क्या होगा ....

— LcSalazar

Answer 6

मैं इस मुद्दे के बारे में बहुत कुछ पढ़ रहा था और एक बहुत जल्दी समाधान प्रदान करना चाहता था जिससे मुझे मदद मिली।

let style = window.getComputedStyle(document.getElementById('email'))
  if (style && style.backgroundColor !== inputBackgroundNormalState) {
    this.inputAutofilledByBrowser = true
  }

जहाँ inputBackgroundNormalStateमेरे टेम्पलेट के लिए 'आरजीबी (255, 255, 255)' है।

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

संपादित करें: यह हर ब्राउज़र के लिए काम करता है

Comments

महान सोच!

— मोटो

Answer 7

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

• हर आधे से एक सेकंड के तीसरे को पोल करें (ज्यादातर मामलों में तत्काल होने की आवश्यकता नहीं है)
• JQuery का उपयोग करके परिवर्तन ईवेंट को ट्रिगर करें फिर परिवर्तन ईवेंट को सुनने वाले फ़ंक्शन में अपना तर्क दें।

• Chrome छिपे हुए ऑटोफ़िल पासवर्ड मानों के लिए एक फ़िक्स जोड़ें।

  $(document).ready(function () {
      $('#inputID').change(YOURFUNCTIONNAME);
      $('#inputID').keypress(YOURFUNCTIONNAME);
      $('#inputID').keyup(YOURFUNCTIONNAME);
      $('#inputID').blur(YOURFUNCTIONNAME);
      $('#inputID').focusin(YOURFUNCTIONNAME);
      $('#inputID').focusout(YOURFUNCTIONNAME);
      $('#inputID').on('input', YOURFUNCTIONNAME);
      $('#inputID').on('textInput', YOURFUNCTIONNAME);
      $('#inputID').on('reset', YOURFUNCTIONNAME);
  
      window.setInterval(function() {
          var hasValue = $("#inputID").val().length > 0;//Normal
          if(!hasValue){
              hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome
          }
  
          if (hasValue) {
              $('#inputID').trigger('change');
          }
      }, 333);
  });

Answer 8

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

bower install autofill-event

Comments

यह jQuery के कस्टम फ़ॉर्म के साथ बहुत अच्छा काम करता है। मैंने इसे अभी-अभी ड्रॉप किया है और मेरे कस्टम चयन सूचियों ने ऑटोफिल के साथ बहुत अच्छा काम किया है।

— क्रिस ब्लूम

Answer 9

मेरा समाधान:

changeसामान्य रूप से और DOM सामग्री लोड पर घटनाओं को सुनें , ऐसा करें:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

यह उन सभी क्षेत्रों के लिए परिवर्तन की घटनाओं को आग देगा जो उपयोगकर्ता को संपादित करने का मौका देने से पहले खाली नहीं थे।

Comments

उत्तम। पहला समाधान मैंने क्रोम के साथ काम करते हुए पाया!

— इकुलस

यह वास्तव में @ सरल है कि कुछ समाधान कितने सरल हो सकते हैं।

— कैमिलो मार्टिन

लेकिन elem.val () क्रोम में स्वत: पूर्ण पासवर्ड फ़ील्ड के लिए खाली स्ट्रिंग देता है :(

— हेमंत_नैगी

@Hemant_Negi क्या क्रोम घटना को वैसे भी नहीं भेजता है? यदि मैं गलत हूं तो मुझे सही करों। मैं लास्टपास का उपयोग कर रहा हूं और यह देखने के लिए इसे निष्क्रिय करने के लिए बहुत आलसी हूं कि यह बिना काम करता है या नहीं।

— कैमिलो मार्टिन

हाँ क्रोम प्रेषण परिवर्तन की घटना है, लेकिन जब मैं उस मान को पुनः प्राप्त करने का प्रयास करता हूँ तो वह खाली हो जाता है।

— हेमंत_नेगी

Answer 10

मुझे भी उसी समस्या का सामना करना पड़ा जहाँ लेबल को भरने के लिए ऑटोफिल और एनीमेशन का पता नहीं लगा था और टेक्स्ट भरने पर लेबल हिल रहा था और इस समाधान ने मेरे लिए काम किया।

input:-webkit-autofill ~ label {
    top:-20px;
} 

Comments

यह मददगार है।

— जंगमशेकलेफोर्ड

वास्तव में मुझे क्या चाहिए :)

— डबरूले

Answer 11

मैं एक ऐसी ही चीज की तलाश में था। केवल क्रोम ... मेरे मामले में आवरण विभाग को यह जानने की आवश्यकता थी कि क्या इनपुट फ़ील्ड स्वतःपूर्ण थी। इसलिए मैं इसे अतिरिक्त सीएसएस दे सकता था जैसे कि क्रोम इनपुट क्षेत्र पर करता है जब वह इसे ऑटोफिल करता है। मेरे संयुक्त समाधान के ऊपर सभी उत्तरों को देखकर निम्नलिखित थे:

/* 
 * make a function to use it in multiple places
 */
var checkAutoFill = function(){
    $('input:-webkit-autofill').each(function(){
        $(this).closest('.input-wrapper').addClass('autofilled');
    });
}

/* 
 * Put it on the 'input' event 
 * (happens on every change in an input field)
 */
$('html').on('input', function() {
    $('.input-wrapper').removeClass('autofilled');
    checkAutoFill();
});

/*
 * trigger it also inside a timeOut event 
 * (happens after chrome auto-filled fields on page-load)
 */
setTimeout(function(){ 
    checkAutoFill();
}, 0);

इस काम के लिए html होगा

<div class="input-wrapper">
    <input type="text" name="firstname">
</div>

Answer 12

मुझे पता है कि यह एक पुराना धागा है, लेकिन मैं कल्पना कर सकता हूं कि कई लोग यहां इसका समाधान ढूंढ सकते हैं।

ऐसा करने के लिए, आप जाँच सकते हैं कि इनपुट (नों) का मान है:

$(function() {
    setTimeout(function() {
        if ($("#inputID").val().length > 0) {
            // YOUR CODE
        }
    }, 100);
});

जब मैं सबमिट बटन को सक्षम करने के लिए लोड किया जाता है तो मैं इसका उपयोग अपने लॉगिन फॉर्म में मूल्यों की जांच करने के लिए करता हूं। कोड jQuery के लिए बनाया गया है, लेकिन यदि आवश्यक हो तो बदलना आसान है।

Comments

यदि आप तीसरी पंक्ति को अद्यतन करते हैं तो यह कोड मेरे लिए बहुत अच्छा काम करता है($("#inputID:-webkit-autofill").val().length > 0) {

— हेक्टर

Answer 13

यह वेबकिट रेंडर इंजन वाले ब्राउज़रों के लिए समाधान है । जब फॉर्म को ऑटोफिल किया जाता है, तो इनपुट को छद्म वर्ग मिलेगा : -webkit-autofill- (fe input: -webkit-autofill {...})। तो यह पहचानकर्ता है जिसे आपको जावास्क्रिप्ट के माध्यम से जांचना चाहिए।

कुछ परीक्षण फार्म के साथ समाधान:

<form action="#" method="POST" class="js-filled_check">

    <fieldset>

        <label for="test_username">Test username:</label>
        <input type="text" id="test_username" name="test_username" value="">

        <label for="test_password">Test password:</label>
        <input type="password" id="test_password" name="test_password" value="">

        <button type="submit" name="test_submit">Test submit</button>

    </fieldset>

</form>

और जावास्क्रिप्ट:

$(document).ready(function() {

    setTimeout(function() {

        $(".js-filled_check input:not([type=submit])").each(function (i, element) {

            var el = $(this),
                autofilled = (el.is("*:-webkit-autofill")) ? el.addClass('auto_filled') : false;

            console.log("element: " + el.attr("id") + " // " + "autofilled: " + (el.is("*:-webkit-autofill")));

        });

    }, 200);

});

समस्या तब होती है जब पृष्ठ लोड को पासवर्ड मान, यहां तक ​​कि लंबाई भी मिलती है। इसकी वजह है ब्राउजर की सिक्योरिटी। साथ ही टाइमआउट , यह इसलिए है क्योंकि ब्राउज़र कुछ समय अनुक्रम के बाद फॉर्म भर देगा।

यह कोड भरे हुए इनपुट में वर्ग auto_filled जोड़ देगा । इसके अलावा, मैंने इनपुट प्रकार पासवर्ड मान, या लंबाई की जांच करने की कोशिश की, लेकिन पृष्ठ पर कुछ घटना घटने के बाद ही यह काम किया है। इसलिए मैंने कुछ इवेंट को ट्रिगर करने की कोशिश की, लेकिन सफलता के बिना। अभी के लिए यह मेरा समाधान है। का आनंद लें!

Comments

यह अप-टू-डेट उत्तर है।

— बेन राहिकोट

मैंने इस समाधान की कोशिश की और मेरे लिए बहुत अच्छा काम किया। आपका बहुत बहुत धन्यवाद।

— मार्कस क्राइस्टोमो

Answer 14

मेरे पास इस प्रश्न का सही समाधान है कि यह कोड स्निपेट आज़माएं।
डेमो यहाँ है

function ModernForm() {
    var modernInputElement = $('.js_modern_input');

    function recheckAllInput() {
        modernInputElement.each(function() {
            if ($(this).val() !== '') {
                $(this).parent().find('label').addClass('focus');
            }
        });
    }

    modernInputElement.on('click', function() {
        $(this).parent().find('label').addClass('focus');
    });
    modernInputElement.on('blur', function() {
        if ($(this).val() === '') {
            $(this).parent().find('label').removeClass('focus');
        } else {
            recheckAllInput();
        }
    });
}

ModernForm();

.form_sec {
  padding: 30px;
}
.form_sec .form_input_wrap {
  position: relative;
}
.form_sec .form_input_wrap label {
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
  color: #333;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input_wrap label.focus {
  top: 5px;
  color: #a7a9ab;
  font-weight: 300;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border: none;
  border-bottom: 2px solid #d3d4d5;
  padding: 30px 0 5px 0;
  outline: none;
}
.form_sec .form_input.err {
  border-bottom-color: #888;
}
.form_sec .cta_login {
  border: 1px solid #ec1940;
  border-radius: 2px;
  background-color: #ec1940;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  padding: 15px 40px;
  margin-top: 30px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form_sec">
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Full Name
            </label>
            <input type="text" name="name" id="name" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-6 col-md-6">
            <label>
                Emaill
            </label>
            <input type="email" name="email" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-12 col-md-12">
            <label>
                Address Line 1
            </label>
            <input type="text" name="address" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                City
            </label>
            <input type="text" name="city" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                State
            </label>
            <input type="text" name="state" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Country
            </label>
            <input type="text" name="country" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-4 col-md-4 form_input_wrap">
            <label>
                Pin
            </label>
            <input type="text" name="pincode" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row cta_sec">
        <div class="col-lg-12">
            <button type="submit" class="cta_login">Submit</button>
        </div>
    </div>
</form>

Answer 15

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

उदाहरण:

सीएसएस

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

जावास्क्रिप्ट

  let css = $("#selector").css("box-shadow")
  if (css.match(/inset/))
    console.log("autofilled:", $("#selector"))

Answer 16

यहाँ Klarna UI टीम से लिया गया CSS समाधान है। उनका अच्छा कार्यान्वयन यहाँ संसाधन देखें

मेरे लिए ठीक काम करता है।

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
}

Answer 17

मैंने इसी समस्या के लिए इस समाधान का उपयोग किया।

HTML कोड को इसे बदलना चाहिए:

<input type="text" name="username" />
<input type="text" name="password" id="txt_password" />

और jQuery कोड में होना चाहिए document.ready:

$('#txt_password').focus(function(){
    $(this).attr('type','password');
});

Answer 18

मैंने यह जांचने के लिए उपयोगकर्ता नाम पर धब्बा घटना का उपयोग किया कि क्या pwd फ़ील्ड स्वतः भरा हुआ था।

 $('#userNameTextBox').blur(function () {
        if ($('#userNameTextBox').val() == "") {
            $('#userNameTextBox').val("User Name");
        }
        if ($('#passwordTextBox').val() != "") {
            $('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
            $('#passwordTextBox').show();
        }
    });

यह IE के लिए काम करता है, और अन्य सभी ब्राउज़रों के लिए काम करना चाहिए (मैंने केवल IE की जाँच की है)

Comments

@ क्रिस ने आईई के साथ अपने समाधान का परीक्षण किया, ब्राउज़रों ने javascsript घटनाओं को अलग तरीके से हैंडल किया। मेरा समाधान सरल और पढ़ने में आसान है और कोड के लिए अधिक कठिन ब्राउज़रों में से एक है।

— ब्रिजेट आर्जिंगटन

मैं एक ही समाधान के साथ समाप्त होता हूं: blurघटना। मैं changeऔर समारोह के लिए एक ही समारोह लागू होते हैं blurऔर यह महान काम किया। अतिरिक्त पुस्तकालयों के बिना एक सरल समाधान।

— पॉलो चेक

Answer 19

मुझे भी यही समस्या थी और मैंने इसका हल लिखा है।

जब पृष्ठ लोड हो रहा हो तो यह प्रत्येक इनपुट फ़ील्ड पर मतदान शुरू करता है (मैंने 10 सेकंड सेट किया है लेकिन आप इस मान को ट्यून कर सकते हैं)।
10 सेकंड के बाद यह हर इनपुट फ़ील्ड पर पोलिंग को रोक देता है और यह फ़ोकस किए गए इनपुट (यदि एक) पर ही शुरू होता है। जब आप इनपुट को धुंधला करते हैं तो यह बंद हो जाता है और यदि आप किसी एक पर ध्यान केंद्रित करते हैं तो फिर से शुरू होता है।

इस तरह से आप केवल तभी मतदान करते हैं जब वास्तव में जरूरत होती है और केवल एक वैध इनपुट पर।

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on the focused inputs (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
    var $this = $(this);
    focused = setInterval(function() {
        if ($this.val() !== $this.attr("value")) {
            $this.trigger("change");
        }
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

जब आप कई मानों को स्वचालित रूप से सम्मिलित करते हैं तो यह बहुत अच्छी तरह से काम नहीं करता है, लेकिन इसे वर्तमान फॉर्म पर प्रत्येक इनपुट की तलाश में ट्विक किया जा सकता है।

कुछ इस तरह:

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on inputs of the focused form
var focused;
$(document)
.on("focus", "input", function() {
    var $inputs = $(this).parents("form").find("input");
    focused = setInterval(function() {
        $inputs.each(function() {
            if ($(this).val() !== $(this).attr("value")) {
                $(this).trigger("change");
            }
        });
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

Answer 20

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

var autofilldetect = document.createElement('input');
autofilldetect.style.position = 'absolute';
autofilldetect.style.top = '-100em';
autofilldetect.style.left = '-100em';
autofilldetect.type = 'text';
autofilldetect.name = 'secondname';
autofilldetect.tabIndex = '-1';

इस इनपुट को फॉर्म में जोड़ें और फॉर्म सबमिट पर इसके मूल्य की जांच करें।

Answer 21

वहाँ है यह है कि मतदान (कम से कम क्रोम के लिए) पर निर्भर नहीं करता करने के लिए एक समाधान हो दिखाई देते हैं। यह लगभग हैकिश के रूप में है, लेकिन मुझे लगता है कि यह वैश्विक मतदान से थोड़ा बेहतर है।

इस परिदृश्य पर विचार करें:

1. उपयोगकर्ता फ़ील्ड 1 भरने लगता है

2. उपयोगकर्ता एक स्वत: पूर्ण सुझाव का चयन करता है जो फ़ील्ड 2 और फ़ील्ड 3 को ऑटोफिल करता है

समाधान: सभी क्षेत्रों पर एक ऑनब्लर पंजीकृत करें जो निम्नलिखित jQuery स्निपेट $ (': - वेबकिट-ऑटोफिल') के माध्यम से ऑटो-भरे हुए क्षेत्रों की उपस्थिति की जांच करता है।

यह तब से तत्काल नहीं होगा जब तक कि यह उपयोगकर्ता 1 फ़ील्ड को ब्लर करने में देरी नहीं करेगा, लेकिन यह ग्लोबल पोलिंग पर निर्भर नहीं करता है इसलिए IMO, यह एक बेहतर समाधान है।

उस ने कहा, क्योंकि प्रवेश कुंजी मारने से एक फॉर्म जमा हो सकता है, आपको ऑनकप्रेस के लिए एक संगत हैंडलर की भी आवश्यकता हो सकती है।

वैकल्पिक रूप से, आप वैश्विक मतदान का उपयोग $ जाँच करने के लिए कर सकते हैं (': - वेबकिट-ऑटोफिल')

Answer 22

मेरे व्यक्तिगत अनुभव से, नीचे का कोड फ़ायरफ़ॉक्स IE और सफारी के साथ अच्छी तरह से काम करता है, लेकिन क्रोम में स्वत: पूर्ण होने पर बहुत अच्छी तरह से काम नहीं कर रहा है।

function check(){
clearTimeout(timeObj);
 timeObj = setTimeout(function(){
   if($('#email').val()){
    //do something
   }
 },1500);
}

$('#email').bind('focus change blur',function(){
 check();
});

नीचे कोड बेहतर काम करता है, क्योंकि यह हर बार ट्रिगर करेगा जब उपयोगकर्ता इनपुट क्षेत्र पर क्लिक करता है और वहां से आप यह जांच सकते हैं कि इनपुट क्षेत्र खाली है या नहीं।

$('#email').bind('click', function(){
 check();
});

Answer 23

मैं क्रोम पर सफल रहा:

    setTimeout(
       function(){
          $("#input_password").focus();
          $("#input_username").focus();
          console.log($("#input_username").val());
          console.log($("#input_password").val());
       }
    ,500);

Comments

यकीन नहीं है कि जब वास्तव में क्रोम ऑटोफिल चलता है, लेकिन $ ('इनपुट, चयन') पर। ('फ़ोकसिन', फ़ंक्शन (ईवीटी) {...}); मुझे पहले से ही सभी क्षेत्रों के लिए स्वत: पूर्ण मान प्राप्त हैं।

— 11

शायद नया संस्करण?

— एंटोनी ओ

Answer 24

मेरा समाधान है:

    $.fn.onAutoFillEvent = function (callback) {
        var el = $(this),
            lastText = "",
            maxCheckCount = 10,
            checkCount = 0;

        (function infunc() {
            var text = el.val();

            if (text != lastText) {
                lastText = text;
                callback(el);
            }
            if (checkCount > maxCheckCount) {
                return false;
            }
            checkCount++;
            setTimeout(infunc, 100);
        }());
    };

  $(".group > input").each(function (i, element) {
      var el = $(element);

      el.onAutoFillEvent(
          function () {
              el.addClass('used');
          }
      );
  });

Comments

आपके समाधान के लिए एक स्पष्टीकरण में मदद मिलेगी

— टन

मुझे लगा कि यह जाहिर है। तो मूल रूप से विचार इनपुट क्षेत्र युगल समय के मूल्य की जांच करना है। वर्तमान कार्यान्वयन में यह 100 एमएस विलंब के साथ 10 गुना है। इसलिए जब एक दूसरे 10 * 1000 = 1sec ब्राउज़र के दौरान ऑटोफिल मान भरें तो ऑटोफिल को दिए गए कॉलबैक को कॉल किया जाएगा। वर्तमान उदाहरण में यह सिर्फ एक वर्ग जोड़ता है। यदि आपके पास अधिक प्रश्न हैं, तो कृपया संकोच न करें और बस पूछें :)।

— रोमिक

Answer 25

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

setTimeout(function() {
 if($('input:-webkit-autofill').length > 0) {
   //do some stuff
 }
},300)

क्रोमियम में इस मुद्दे के लिए एक लिंक है। https://bugs.chromium.org/p/chromium/issues/detail?id=636425

Answer 26

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

// lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
    var theEmail = $("#email-input").val();
    if (
        ( theEmail.includes("@") ) &&
        ( theEmail != lastEmail )
    ) {
        lastEmail = theEmail;
        // Do some AJAX
    }
}, 1000); // Check the field every 1 second

Answer 27

फ़ायरफ़ॉक्स में ऑटो-फिल का पता लगाने के लिए मेरे पास कठिन समय था। यह एकमात्र समाधान है जिसने मेरे लिए काम किया:

डेमो

HTML:

<div class="inputFields">
   <div class="f_o">
      <div class="field_set">
        <label class="phold">User</label>
        <input type="tel" class="form_field " autocomplete="off" value="" maxlength="50">
      </div>
   </div>
   <div class="f_o">
      <div class="field_set">
         <label class="phold">Password</label>
         <input type="password" class="form_field " autocomplete="off" value="" maxlength="50">
      </div>
   </div>
</div>

सीएसएस:

/* Detect autofill for Chrome */
.inputFields input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}
.inputFields input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}

@keyframes onAutoFillStart {
}

@keyframes onAutoFillCancel {
}
.inputFields {
  max-width: 414px;
}

.field_set .phold{
  display: inline-block;
  position: absolute;
  font-size: 14px;
  color: #848484;
  -webkit-transform: translate3d(0,8px,0);
  -ms-transform: translate3d(0,8px,0);
  transform: translate3d(0,8px,0);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  background-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin-left: 8px;
  z-index: 1;
  left: 0;
  pointer-events: none;
}

.field_set .phold_active {
   font-size: 12px;
   -webkit-transform: translate3d(0,-8px,0);
  -ms-transform: translate3d(0,-8px,0);
  transform: translate3d(0,-8px,0);
  background-color: #FFF;
  padding-left: 3px;
  padding-right: 3px;
}

.field_set input[type='text'], .field_set select, .field_set input[type='tel'], .field_set input[type='password'] {
    height: 36px;
}

.field_set input[type='text'], .field_set input[type='tel'], .field_set input[type='password'], .field_set select, .field_set textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ababab;
    border-radius: 0;
}

.field_set {
    margin-bottom: 10px;
    position: relative;
}

.inputFields .f_o {
    width: 100%;
    line-height: 1.42857143;
    float: none;
}

जावास्क्रिप्ट:

    // detect auto-fill when page is loading
  $(window).on('load', function() {
    // for sign in forms when the user name and password are filled by browser
    getAutofill('.inputFields');
  });

  function getAutofill(parentClass) {
    if ($(parentClass + ' .form_field').length > 0) {    
      var formInput = $(parentClass + ' .form_field');
      formInput.each(function(){   
        // for Chrome:  $(this).css('animation-name') == 'onAutoFillStart'
        // for Firefox: $(this).val() != ''
        if ($(this).css('animation-name') == 'onAutoFillStart' || $(this).val() != '') {
          $(this).siblings('.phold').addClass('phold_active');
        } else {
          $(this).siblings('.phold').removeClass('phold_active');
        }
      });
    }
  } 

  $(document).ready(function(){

    $(document).on('click','.phold',function(){
      $(this).siblings('input, textarea').focus();
    });
    $(document).on('focus','.form_field', function(){
      $(this).siblings('.phold').addClass('phold_active');
    });

    // blur for Chrome and change for Firefox
    $(document).on('blur change','.form_field', function(){
      var $this = $(this);
      if ($this.val().length == 0) {        
        $(this).siblings('.phold').removeClass('phold_active');
      } else {
        $(this).siblings('.phold').addClass('phold_active');
      }
    });

    // case when form is reloaded due to errors
    if ($('.form_field').length > 0) {
      var formInput = $('.form_field');
      formInput.each(function(){
        if ($(this).val() != '') {
          $(this).siblings('.phold').addClass('phold_active');
        } else {
          $(this).siblings('.phold').removeClass('phold_active');
        }
      });
    }

  }); 

क्रोम के लिए मैं उपयोग: if ($(this).css('animation-name') == 'onAutoFillStart')

फ़ायरफ़ॉक्स के लिए: if ($(this).val() != '')

Answer 28

सीएसएस में प्रयास करें

input:-webkit-autofill { border-color: #9B9FC4 !important; }