अपने-आप जानकारी भरने की सुविधा, ऑरिजिन ट्रायल में है

Jeremy Wagner

पब्लिश होने की तारीख: 10 जून, 2026

वेब पर फ़ॉर्म, लोगों के साथ इंटरैक्ट करने का एक सामान्य तरीका है. हालांकि, ये लोगों के लिए काफ़ी मुश्किल होते हैं. ब्राउज़र लंबे समय से, अपने-आप भरने की सुविधा देते आ रहे हैं. इससे उपयोगकर्ताओं को बार-बार एक ही जानकारी नहीं भरनी पड़ती. जैसे, क्रेडिट कार्ड नंबर, पते, और लॉगिन क्रेडेंशियल.

डेवलपर के लिए, फ़ॉर्म में अपने-आप भरने की सुविधा को मैनेज करना एक चुनौती है. डेवलपर, <form> एलिमेंट पर input या change इवेंट को सुन सकते हैं. हालांकि, इन इवेंट से यह पता नहीं चलता कि फ़ील्ड में डेटा कैसे आया. इस वजह से, फ़ॉर्म अपने-आप भरने के ठीक समय पर, लेआउट में बदलाव जैसे खास लॉजिक को ट्रिगर करना मुश्किल हो जाता है. नया autofill इवेंट—अब Chrome की ऑरिजिन ट्रायल के तौर पर उपलब्ध है

Chrome 147 से शुरू होने वाला यह सिग्नल, डेवलपर के लिए तब काम का होता है, जब ब्राउज़र, उपयोगकर्ता को ऑटोमैटिक भरने की सुविधा में मदद कर रहा हो.

autofill: input और change की समस्याओं को हल करना

input और change इवेंट, सामान्य सिग्नल होते हैं. ये इस बात में अंतर नहीं करते कि उपयोगकर्ता ने फ़ॉर्म फ़ील्ड को मैन्युअल तरीके से भरा है या ऑटोफ़िल का इस्तेमाल किया है. फ़ॉर्म अपने-आप भरने की सुविधा के लिए कोई इवेंट उपलब्ध न होने की वजह से, डेवलपर के लिए यूज़र इंटरफ़ेस (यूआई) को अपडेट करना मुश्किल हो जाता है. ये अपडेट, फ़ॉर्म भरते समय मददगार होते हैं. उदाहरण के लिए, कोई उपयोगकर्ता अपने देश का नाम डालता है. इसके बाद, उसे एक फ़ील्ड दिखता है, जिसमें उसे अपने राज्य या ज़िले का नाम डालना होता है. यह फ़ील्ड, देश के हिसाब से अलग-अलग होता है. ऑटोमैटिक तरीके से जानकारी भरने के अनुरोध के जवाब में इस अपडेट को ट्रिगर करना, डेवलपर के लिए ज़्यादा अनुमान लगाने वाला और उपयोगकर्ताओं के लिए मददगार होता है. autofill इवेंट से इस समस्या को हल किया जा सकता है.

autofill इवेंट, ब्राउज़र के फ़ॉर्म को अपने-आप भरने से ठीक पहले ट्रिगर होता है. इवेंट के लिसनर को, भरने के लिए autofillValues का एक कलेक्शन और एक refill फ़ंक्शन मिलता है. लिसनर, refill फ़ंक्शन को कॉल करके यह अनुरोध कर सकता है कि ब्राउज़र फ़ॉर्म को फिर से भरे. उदाहरण के लिए, अगर लिसनर ने कॉन्टेंट में बदलाव किया है, तो वह ऐसा कर सकता है. उदाहरण के लिए, इस फ़ॉर्म मार्कअप को देखें:

<form>
  <div>
    <label for="country">Country</label>
    <select id="country" name="country" autocomplete="country">
      <!-- ... -->
    </select>
  </div>
  <div>
    <label for="address-line-1">Address Line 1</label>
    <input type="text" name="address-line-1" id="address-line-1" autocomplete="address-line1">
  </div>
  <div>
    <label for="city">City</label>
    <input type="text" name="city" id="city" autocomplete="address-level2">
  </div>
  <div>
    <div class="state">
      <!-- This section gets populated based on the
           value provided in the country field -->
    </div>
  </div>
  <div>
    <input type="submit" value="Calculate">
  </div>
</form>

यह JavaScript, document पर autofill इवेंट को बाइंड करता है:

document.addEventListener('autofill', async event => {
  // A null check here is a good idea, as
  // refills are not available in a WebView.
  if (event.refill == null) {
    /* Apply legacy logic */
    return;
  }

  // Walk the fields
  for (const {field, value} of event.autofillValues) {
    if (field.name === 'country') {
      if (value === 'Germany') {
        document.querySelector('.state').innerHTML = `
        <label for="state">State:</label>
        <select name="state" id="state" autocomplete="address-level1">
          <option selected="selected"></option>
          <option value="BW">Baden-Württemberg</option>
          <option value="BY">Bavaria</option>
          <!-- Other states omitted -->
        </select>
      `;
      } else {
        /* Logic for other countries */
      }
    }
  }

  await event.refill();
});

यह उदाहरण, पते के फ़ॉर्म का है. ऑटोमैटिक तरीके से भरने की सुविधा वाली टूलटिप को ट्रिगर करने के लिए, उपयोगकर्ता किसी फ़ॉर्म फ़ील्ड में क्लिक या टैप कर सकता है. पते की जानकारी अपने-आप भरने की सुविधा चुनने पर, ये काम होते हैं:

1. autofill इवेंट हैंडलर, फ़ॉर्म फ़ील्ड में अपने-आप जानकारी भरने की सुविधा चालू होने से ठीक पहले काम करता है.
2. event.autofillValues, ऑटोमैटिक तरीके से भरने की सुविधा से जुड़ा डेटा, दो प्रॉपर्टी वाले ऑब्जेक्ट में उपलब्ध कराता है:
   • field: यह उस डीओएम एलिमेंट का रेफ़रंस होता है जिसमें वैल्यू अपने-आप भरनी होती है.
   • value: फ़ील्ड के लिए, ऑटोमैटिक भरने की सुविधा से मिली वैल्यू.
3. देश के फ़ील्ड का नाम पता चलने पर, लॉजिक देश का पता लगाता है. इस उदाहरण में, देश का नाम जर्मनी है. इसके बाद, यह देश के हिसाब से राज्य के ड्रॉप-डाउन मेन्यू में सही विकल्प दिखाता है.
4. event.refill() को ब्राउज़र को फ़ॉर्म फिर से भरने का निर्देश देने के लिए कॉल किया जाता है. इससे बदले गए फ़ॉर्म पर, ऑटोमैटिक तरीके से भरने की कार्रवाई दोहराई जाती है.

अगर आपको autofill के ज़्यादा जटिल इस्तेमाल के उदाहरण देखने हैं, तो Shopify के Yoav Weiss ने दो डेमो बनाए हैं:

1. निजी जानकारी का फ़ॉर्म. यह फ़ॉर्म, इस पोस्ट में दिए गए उदाहरण जैसा है. हालांकि, इसमें autofill इवेंट के बारे में बुनियादी जानकारी के अलावा और भी जानकारी शामिल है.
2. क्रेडिट कार्ड की जानकारी अपने-आप भरने की सुविधा का डेमो जिसमें autofill इवेंट का इस्तेमाल करके, कार्ड जारी करने वाले बैंक या कंपनी का पता लगाया जाता है. साथ ही, डीओएम को बेहतर विज़ुअल के साथ अपडेट किया जाता है.

क्रेडिट कार्ड की जानकारी अपने-आप भरने की सुविधा का डेमो, autofill इवेंट की क्षमताओं के बारे में बताता है. इस तरह के अनुभव, autofill इवेंट से पहले भी उपलब्ध थे. हालांकि, फ़ॉर्म अपने-आप भरने की सुविधा के लिए एक खास इवेंट होने से, डेवलपर को बेहतर अनुभव मिलता है.

autofill इवेंट और :autofill सीएसएस सूडो-क्लास

:autofill सीएसएस स्यूडो-क्लास ऑटोमैटिक तरीके से भरे गए फ़ॉर्म एलिमेंट से मेल खाती है. साथ ही, autofill इवेंट इसका पूरक हो सकता है.

उदाहरण के लिए, हो सकता है कि आपको :autofill का इस्तेमाल करके, उन फ़ील्ड को अलग करना हो जिनमें अभी-अभी अपने-आप जानकारी भरी गई है. ऐसा उन फ़ील्ड से किया जा सकता है जिनमें autofill इवेंट के दौरान बदलाव किया गया था. इससे उपयोगकर्ता को यह पता चल सकता है कि फ़ील्ड में पहले से जानकारी भरी गई है. हालांकि, बदलाव किए जा सकने वाले फ़ॉर्म कंट्रोल में डेटा मौजूद होने से, उपयोगकर्ता को यह पता चलता है कि अगर उसे ज़रूरत है, तो वह अब भी इसमें बदलाव कर सकता है.

document.addEventListener('autofill', async event => {
  if (event.refill !== null) {
    // Walk the fields to be autofilled:
    for (const {field, value} of event.autofillValues) {
      let cardIssuer;

      // If this field is the credit card number,
      // use its value to get the card issuer.
      if (field.name === 'card-number') {
        cardIssuer = getCardIssuerFromNumber(value);
      }

      // Populate the card issuer field with
      // the data we got from the card number
      if (field.name === 'card-issuer') {
        field.value = cardIssuer;
        field.classList.add('modified-by-event');
      }
    }
  }
});

पिछले कोड ब्लॉक में, क्रेडिट कार्ड नंबर फ़ील्ड मिलने तक, अपने-आप भरे गए फ़ील्ड पर चला जाता है. इस फ़ील्ड में मौजूद डेटा का इस्तेमाल, कार्ड जारी करने वाली कंपनी की जानकारी पाने के लिए किया जाता है. यह जानकारी फ़ील्ड में अपने-आप भर जाती है और इसे .modified-by-event क्लास दी जाती है. इसके बाद, इस फ़ील्ड के लिए ऑटोमैटिक तरीके से भरने की स्टाइल में बदलाव किया जा सकता है, ताकि यह autofill इवेंट से बदले गए अन्य फ़ील्ड से अलग दिखे:

/* Standard autofill style: */
input:autofill {
  border: 0.25rem solid #cc0;
}

/* Autofill style for `autofill` event-modified data: */
input.modified-by-event-autofill:autofill {
  border-color: #0cc;
}

इसकी मदद से, अपने-आप भरे गए फ़ॉर्म फ़ील्ड के लिए स्टाइलिंग सिमैंटिक को सुरक्षित रखा जा सकता है. साथ ही, :autofill स्टाइल को इनहेरिट किया जा सकता है. इसके अलावा, उपयोगकर्ता को यह जानकारी दी जा सकती है कि फ़ॉर्म फ़ील्ड को अलग तरीके से अपने-आप भरा गया है.

autofill इवेंट और field-sizing सीएसएस प्रॉपर्टी

अगर field-sizing सीएसएस प्रॉपर्टी की वैल्यू content है, तो <textarea> जैसे फ़ील्ड अपने-आप रीसाइज़ हो जाते हैं, ताकि वे अपने कॉन्टेंट के हिसाब से फ़िट हो सकें. इससे छोटे फ़ील्ड में अजीब दिखने वाले स्क्रोलबार की ज़रूरत नहीं पड़ती:

textarea {
  /* The field grows to fit the content automatically: */
  field-sizing: content;
  min-height: 3lh;
  transition: min-height 0.2s ease-out;
}

इससे उपयोगकर्ता को अच्छा अनुभव मिलता है, लेकिन इससे लेआउट शिफ़्ट हो सकते हैं. उपयोगकर्ता के टाइप करने पर, इनपुट फ़ील्ड का दायरा धीरे-धीरे बढ़ता है. हालांकि, जब कोई ब्राउज़र, कई लाइनों वाले पते को <textarea> एलिमेंट में अपने-आप भर देता है, तो फ़ील्ड तुरंत काफ़ी बड़ा हो सकता है. autofill इवेंट की मदद से, इन ट्रांज़िशन को ज़्यादा असरदार तरीके से मैनेज किया जा सकता है. उदाहरण के लिए, कंटेनर को ऐनिमेट करके या उसकी स्क्रोल पोज़िशन को अडजस्ट करके, ताकि उपयोगकर्ता को कॉन्टेक्स्ट न खोना पड़े.

document.addEventListener('autofill', event => {
  // Assumes a single field for the purpose of a quick
  // demonstration, such as a multiline address field:
  const [addressDetails] = event.autofillValues;

  // Since field-sizing: content causes an immediate jump,
  // we can use the event to ensure the UI remains stable:
  requestAnimationFrame(() => {
    addressDetails.scrollIntoView({behavior: 'smooth', block: 'nearest'});
  });

  if (event.refill !== null) {
    await event.refill();
  }
});

हर ऐप्लिकेशन की ज़रूरतें अलग-अलग होती हैं. इसलिए, आपको यह तय करना होगा कि यह पैटर्न इस्तेमाल करने लायक है या नहीं. हालांकि, इससे यह पता चलता है कि सीएसएस और autofill इवेंट का इस्तेमाल करके क्या किया जा सकता है.

फ़ॉर्म में अपने-आप भरने की सुविधा का पता लगाना और उसे मेज़र करना

फ़ॉर्म अपने-आप भरने की सुविधा से मिला Analytics डेटा, कारोबारों के लिए अहम होता है. हालांकि, मौजूदा वेब सुविधाओं की मदद से, फ़ॉर्म में अपने-आप भरने की सुविधा को मेज़र करना मुश्किल होता है. उदाहरण के लिए, सीएसएस :autofill सूडो-क्लास पर भरोसा करना, जो कि बेसलाइन नहीं है.

autofill इवेंट, फ़ॉर्म में अपने-आप जानकारी भरने की सुविधा का पता लगाने वाला टूल है. यह इवेंट सिर्फ़ ऑटोमैटिक भरे जाने की सुविधा का इस्तेमाल करने पर ट्रिगर होता है. यह किसी भी इनपुट पर ट्रिगर नहीं होता. साथ ही, event.autofillValues प्रॉपर्टी में सिर्फ़ वे फ़ील्ड शामिल होते हैं जिनमें ऑटोमैटिक भरे जाने की सुविधा का इस्तेमाल किया गया था. इसलिए, ऑटोमैटिक भरे गए डेटा को ट्रैक किया जा सकता है:

document.addEventListener('autofill', event => {
  // Get autofilled data
  const autofillData = {
    // Assumes the form has an ID for simplicity:
    form: event.target.id,
    autofilled: true
  };

  // Send to analytics endpoint
  const body = JSON.stringify(autofillData);
  navigator.sendBeacon('/analytics', body);
});

इस उदाहरण को आसान बनाया गया है, लेकिन इससे पता चलता है कि इस जानकारी को कैप्चर करना कितना आसान है. ऑटोमैटिक भरने की सुविधा के ऐनलिटिक्स डेटा को इस तरह से स्ट्रक्चर और इकट्ठा किया जा सकता है जिससे आपको फ़ायदा हो. इसके लिए, ऐसे समाधानों का इस्तेमाल करने की ज़रूरत नहीं होती जिन्हें लागू करना मुश्किल हो और जिन पर भरोसा न किया जा सके.

ऑरिजिन ट्रायल के लिए रजिस्टर करना

autofill इवेंट, Chrome की ओरिजिन ट्रायल में है. इसमें हिस्सा लेकर, Chrome को इसे बेहतर बनाने में मदद की जा सकती है. ऑरिजिन ट्रायल की मदद से, एक्सपेरिमेंट के तौर पर उपलब्ध कराई गई सुविधाओं को असली उपयोगकर्ताओं के साथ टेस्ट किया जा सकता है. साथ ही, एपीआई के वेब प्लैटफ़ॉर्म का हिस्सा बनने से पहले, Chrome टीम को सुझाव/राय दी जा सकती है या शिकायत की जा सकती है.

अपनी साइट पर autofill इवेंट का इस्तेमाल शुरू करने के लिए, यहां ओरिजिन ट्रायल के लिए रजिस्टर करें. Chrome यह देखने के लिए उत्सुक है कि आप इसका इस्तेमाल कैसे करते हैं. साथ ही, इससे हमें यह पता चलेगा कि हम इसे बेहतर बनाने के लिए क्या कर सकते हैं.