অটোফিল ইভেন্টটি অরিজিন ট্রায়ালে রয়েছে।

Jeremy Wagner

প্রকাশিত: ১০ জুন, ২০২৬

ওয়েবে ফর্ম একটি বহুল ব্যবহৃত যোগাযোগের মাধ্যম, কিন্তু এটি ব্যবহারকারীদের জন্য বেশ অসুবিধার কারণ হয়ে দাঁড়ায়। এই অসুবিধা কমাতে ব্রাউজারগুলো অনেক আগে থেকেই অটোফিল সুবিধা দিয়ে আসছে, যা ব্যবহারকারীদের ক্রেডিট কার্ড নম্বর, ঠিকানা এবং লগইন তথ্যের মতো পুনরাবৃত্তিমূলক কাজ থেকে মুক্তি দেয়।

ডেভেলপারদের জন্য ফর্ম অটোফিল পরিচালনা করা একটি চ্যালেঞ্জ। যদিও ডেভেলপাররা <form> এলিমেন্টের input বা change ইভেন্ট শুনতে পারেন, এই ইভেন্টগুলো থেকে জানা যায় না যে ডেটা কীভাবে ফিল্ডে এসেছে। এই স্বচ্ছতার অভাবের কারণে, ফর্মটি অটোফিল হওয়ার ঠিক সেই মুহূর্তে লেআউট অ্যাডজাস্টমেন্টের মতো নির্দিষ্ট লজিক চালু করা কঠিন হয়ে পড়ে। নতুন autofill ইভেন্টটি এখন ক্রোম অরিজিন ট্রায়াল হিসেবে উপলব্ধ।

ক্রোম ১৪৭ থেকে শুরু হওয়া এই ফিচারটি—যখন ব্রাউজার ব্যবহারকারীকে অটোফিল করতে সহায়তা করে, তখন ডেভেলপারদের জন্য একটি দরকারি সংকেত প্রদান করে।

autofill : যা input এবং change করতে পারেনি, তার সমাধান।

input এবং change ইভেন্টগুলো হলো জেনেরিক সিগন্যাল, যা ব্যবহারকারীর নিজে হাতে ফর্ম ফিল্ড পূরণ করা এবং অটোফিল ব্যবহারের মধ্যে কোনো পার্থক্য করে না। ফর্ম অটোফিল করার জন্য একটি নির্দিষ্ট ইভেন্টের অভাব ডেভেলপারদের জন্য এমন UI আপডেট নির্ভরযোগ্যভাবে করা কঠিন করে তোলে, যা ফর্ম পূরণের সময় সহায়ক হয়। উদাহরণস্বরূপ, একজন ব্যবহারকারী তার বসবাসের দেশ উল্লেখ করলে, তিনি কোন রাজ্য বা জেলায় বাস করেন তা নির্দিষ্ট করার জন্য একটি 'কাছাকাছি' ফিল্ড প্রদর্শিত হয়, যা দেশভেদে ভিন্ন হয়। একটি অটোফিল অনুরোধের প্রতিক্রিয়ায় এই আপডেটটি ট্রিগার করা ডেভেলপারদের জন্য আরও অনুমানযোগ্য এবং ব্যবহারকারীদের জন্য উপকারী। 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>

এই জাভাস্ক্রিপ্টটি 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 : যে DOM এলিমেন্টটি স্বয়ংক্রিয়ভাবে পূরণ করা হবে তার একটি রেফারেন্স।
   • value : ফিল্ডটির জন্য প্রস্তাবিত অটোফিল মান।
3. যখন দেশের ফিল্ডের নামটি শনাক্ত করা হয়, তখন লজিকটি দেশটি—এই উদাহরণে জার্মানি—শনাক্ত করে এবং সেই দেশের জন্য উপযুক্ত বিকল্পগুলো দিয়ে স্টেট ড্রপ-ডাউনটি পূরণ করে দেয়।
4. ফর্মটি পুনরায় পূরণ করার জন্য ব্রাউজারকে নির্দেশ দিতে event.refill() কল করা হয়, যা পরিবর্তিত ফর্মে অটোফিল ক্রিয়াটির পুনরাবৃত্তি করে।

আপনি যদি আরও জটিল autofill ব্যবহারের ক্ষেত্রে আগ্রহী হন, তাহলে Shopify-এর Yoav Weiss দুটি ডেমো তৈরি করেছেন:

1. একটি ব্যক্তিগত তথ্য ফর্ম যা এই পোস্টের উদাহরণের অনুরূপ, কিন্তু এটি autofill ইভেন্টের একটি সাধারণ প্রদর্শনের চেয়েও বেশি কিছু।
2. একটি ক্রেডিট কার্ড অটোফিল ডেমো , যা autofill ইভেন্ট ব্যবহার করে কার্ড প্রদানকারীকে শনাক্ত করে এবং সমৃদ্ধ ভিজ্যুয়ালের মাধ্যমে DOM-কে ব্যাপকভাবে আপডেট করে।

ক্রেডিট কার্ড অটোফিল ডেমোটি autofill ইভেন্টের কার্যকারিতা তুলে ধরে। যদিও autofill ইভেন্টের আগেও এই ধরনের অভিজ্ঞতা সম্ভব ছিল, ফর্ম অটোফিলিংয়ের জন্য একটি ডেডিকেটেড ইভেন্ট থাকায় ডেভেলপারদের অভিজ্ঞতা আরও ভালো হয়।

autofill ইভেন্ট এবং :autofill CSS সিউডো-ক্লাস

:autofill CSS সিউডো-ক্লাসটি স্বয়ংক্রিয়ভাবে পূরণ করা ফর্ম এলিমেন্টগুলোর সাথে মেলে, এবং 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 CSS প্রপার্টি

যদি field-sizing CSS প্রপার্টির মান ` 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();
  }
});

প্রতিটি অ্যাপ্লিকেশনের প্রয়োজনীয়তা ভিন্ন, তাই আপনাকে ভেবে দেখতে হবে যে এই প্যাটার্নটি ব্যবহার করার মতো কিনা—কিন্তু CSS এবং autofill ইভেন্টের সমন্বয়ে কী অর্জন করা সম্ভব, এটি তারই একটি দৃষ্টান্ত।

ফর্মের স্বয়ংক্রিয় পূরণ শনাক্ত ও পরিমাপ করুন

ফর্ম অটোফিলের অ্যানালিটিক্স ডেটা ব্যবসার জন্য মূল্যবান, কিন্তু বিদ্যমান ওয়েব ফিচার ব্যবহার করে ফর্মের অটোফিল পরিমাপ করা কঠিন। উদাহরণস্বরূপ, প্রচলিত পদ্ধতি হলো CSS :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 ইভেন্টটি একটি ক্রোম অরিজিন ট্রায়ালের অন্তর্ভুক্ত, এবং আপনার অংশগ্রহণ ক্রোমকে এটিকে আরও উন্নত করতে সাহায্য করতে পারে। অরিজিন ট্রায়াল আপনাকে আসল ব্যবহারকারীদের সাথে পরীক্ষামূলক ফিচারগুলো পরীক্ষা করার এবং এপিআইটি ওয়েব প্ল্যাটফর্মের অংশ হওয়ার আগেই ক্রোম টিমকে মতামত জানানোর সুযোগ দেয়।

আপনার সাইটে autofill ইভেন্ট ব্যবহার শুরু করতে, এখানে অরিজিন ট্রায়ালের জন্য নিবন্ধন করুন । আপনি এটি কীভাবে ব্যবহার করেন এবং তা আমাদের উন্নতির সুযোগ খুঁজে পেতে কীভাবে সাহায্য করতে পারে, তা দেখার জন্য ক্রোম অধীর আগ্রহে অপেক্ষা করছে।