رویداد تکمیل خودکار در مرحله آزمایشی اولیه است

Jeremy Wagner

منتشر شده: ۱۰ ژوئن ۲۰۲۶

فرم‌ها یک نقطه تعامل رایج در وب هستند، اما آنها مسئول مقدار قابل توجهی از اصطکاک برای کاربران هستند. مرورگرها مدت‌هاست که قابلیت‌های تکمیل خودکار را برای کاهش این اصطکاک ارائه می‌دهند و کاربران را از کارهای تکراری مانند وارد کردن شماره کارت اعتباری، آدرس‌ها و اعتبارنامه‌های ورود به سیستم نجات می‌دهند.

برای توسعه‌دهندگان، مدیریت تکمیل خودکار فرم‌ها یک چالش است. در حالی که توسعه‌دهندگان می‌توانند input را بشنوند یا رویدادهای change را روی عناصر <form> تغییر دهند، این رویدادها به شما نمی‌گویند که داده‌ها چگونه به فیلد رسیده‌اند. این عدم شفافیت، ایجاد منطق خاص - مانند تنظیمات طرح‌بندی - را دقیقاً در لحظه تکمیل خودکار فرم دشوار می‌کند. رویداد جدید autofill - اکنون به عنوان یک نسخه آزمایشی اصلی Chrome در دسترس است.

از کروم ۱۴۷ شروع می‌شود—هنگامی که مرورگر در حال کمک به کاربر در تکمیل خودکار فرم‌ها است، سیگنال مفیدی برای توسعه‌دهندگان فراهم می‌کند.

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>

این جاوا اسکریپت رویداد autofill را در document متصل می‌کند:

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 دو نسخه آزمایشی ایجاد کرده است:

1. یک فرم اطلاعات شخصی که مشابه مثال این پست است، اما فراتر از یک نمایش اولیه از رویداد autofill عمل می‌کند.
2. یک دموی تکمیل خودکار فرم کارت اعتباری که از رویداد autofill برای شناسایی صادرکننده کارت و به‌روزرسانی قابل توجه DOM با تصاویر غنی استفاده می‌کند.

دموی تکمیل خودکار فرم با کارت اعتباری، قابلیت‌های رویداد autofill را به خوبی نشان می‌دهد. اگرچه این نوع تجربه‌ها قبل از رویداد autofill نیز امکان‌پذیر بودند، اما داشتن یک رویداد اختصاصی برای تکمیل خودکار فرم، تجربه بهتری را برای توسعه‌دهندگان رقم می‌زند.

رویداد autofill و شبه کلاس CSS :autofill

شبه کلاس CSS :autofill با عناصر فرم autofilled مطابقت دارد و رویداد 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');
      }
    }
  }
});

در بلوک کد قبلی، فیلدهای autofilled تا زمانی که فیلد شماره کارت اعتباری پیدا شود، پیمایش می‌شوند. داده‌های موجود در این فیلد برای دریافت صادرکننده کارت استفاده می‌شوند که در فیلد قرار داده شده و کلاس .modified-by-event به آن داده می‌شود. سپس می‌توان استایل autofill این فیلد را طوری تغییر داد که از سایر فیلدهای autofilled که توسط رویداد 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 و ویژگی CSS field-sizing

اگر ویژگی CSS field-sizing مقداری برابر با content داشته باشد، فیلدهایی مانند عنصر <textarea> به طور خودکار تغییر اندازه می‌دهند تا با محتوایشان متناسب شوند. این امر نیاز به نوارهای پیمایش (scrollbar) نامناسب در فیلدهای کوچک را از بین می‌برد:

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 که Baseline نیست.

رویداد 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);
});

این مثال ساده شده است، اما نشان می‌دهد که جمع‌آوری این اطلاعات چقدر ساده‌تر است. شما می‌توانید داده‌های تحلیلی تکمیل خودکار را به روشی که برای شما مفید باشد، بدون راه‌حل‌های موقت که پیاده‌سازی آنها دشوار و غیرقابل اعتماد است، ساختاردهی و جمع‌آوری کنید.

برای دوره آزمایشی Origin ثبت نام کنید

رویداد autofill در یک دوره آزمایشی Chrome origin است و مشارکت شما می‌تواند به Chrome در بهبود آن کمک کند. دوره‌های آزمایشی Origin به شما امکان می‌دهند ویژگی‌های آزمایشی را با کاربران واقعی آزمایش کنید و قبل از اینکه API بخشی از پلتفرم وب شود، به تیم Chrome بازخورد ارائه دهید.

برای شروع استفاده از رویداد autofill در سایت خود، برای نسخه آزمایشی اصلی اینجا ثبت نام کنید . کروم مشتاقانه منتظر است تا ببیند چگونه از آن استفاده می‌کنید و چگونه این می‌تواند به ما در یافتن فرصت‌های بهبود کمک کند.