حدث الملء التلقائي في مرحلة التجربة والتقييم

Jeremy Wagner

تم النشر في 10 يونيو 2026

النماذج هي نقطة تفاعل متكرّرة على الويب، ولكنّها مسؤولة عن قدر كبير من الاحتكاك للمستخدمين. لطالما قدّمت المتصفّحات إمكانات الملء التلقائي للحدّ من هذا الاحتكاك، ما يوفّر على المستخدمين المهام المتكرّرة، مثل إدخال أرقام بطاقات الائتمان والعناوين وبيانات تسجيل الدخول.

بالنسبة إلى المطوّرين، يمثّل التعامل مع عمليات الملء التلقائي للنماذج تحديًا. في حين أنّه بإمكان المطوّرين الاستماع إلى أحداث input أو change على عناصر <form>، لا تخبرك هذه الأحداث كيف وصلت البيانات إلى الحقل. يصعّب هذا النقص في الوضوح تشغيل منطق معيّن، مثل تعديلات التنسيق، في اللحظة المحدّدة التي يتم فيها الملء التلقائي للنموذج. يوفّر الحدث الجديد autofill event، الذي يتوفّر الآن كمرحلة تجربة وتقييم للمصدر في 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 هذا الحدث 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، أنشأ Yoav Weiss من Shopify عرضَين توضيحيَين:

1. نموذج معلومات شخصية مشابه للمثال الوارد في هذا المنشور، ولكنّه يتجاوز العرض التوضيحي الأساسي للحدث autofill
2. عرض توضيحي للملء التلقائي لـ بطاقة الائتمان الذي يستخدم الحدث autofill لرصد جهة إصدار البطاقة وتعديل DOM بشكل كبير باستخدام عناصر مرئية غنية.

يوضّح العرض التوضيحي للملء التلقائي لبطاقة الائتمان إمكانات الحدث autofill. في حين أنّ هذه الأنواع من التجارب كانت ممكنة قبل الحدث autofill، فإنّ توفّر حدث مخصّص لعمليات الملء التلقائي للنماذج يوفّر تجربة أفضل للمطوّرين.

الحدث autofill وفئة CSS الزائفة :autofill

تطابق فئة CSS الزائفة :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 وسمة CSS field-sizing

إذا كانت سمة CSS 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();
  }
});

تختلف متطلبات كل تطبيق، لذا عليك تحديد ما إذا كان هذا نمطًا يستحق الاستخدام، ولكنّه يوضّح ما يمكن تحقيقه باستخدام مجموعة من CSS والحدث autofill.

رصد عمليات الملء التلقائي للنماذج وقياسها

إنّ بيانات "إحصاءات Google" لعمليات الملء التلقائي للنماذج قيّمة للشركات، ولكنّ قياس عمليات الملء التلقائي في النماذج أمر صعب باستخدام ميزات الويب الحالية. على سبيل المثال، تتمثّل الممارسة في الاعتماد على فئة 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);
});

هذا المثال مبسط، ولكنّه يوضّح مدى سهولة الحصول على هذه المعلومات. يمكنك تنظيم بيانات "إحصاءات Google" للملء التلقائي وجمعها بطريقة مناسبة لك، بدون حلول بديلة يصعب تنفيذها وغير موثوق بها.

التسجيل في مرحلة التجربة والتقييم

يتوفّر الحدث autofill في مرحلة التجربة والتقييم للمصدر في Chrome، ويمكن أن تساعد مشاركتك في تحسينه في Chrome. تتيح لك الفترات التجريبية للمصدر اختبار الميزات التجريبية مع مستخدمين حقيقيين وتقديم ملاحظات إلى فريق Chrome قبل أن يصبح واجهة برمجة التطبيقات جزءًا من منصة الويب.

لبدء استخدام الحدث autofill على موقعك الإلكتروني، اشترِك في الفترة التجريبية للمصدر هنا. يتطلّع Chrome إلى معرفة طريقة استخدامك له، وكيف يمكن أن يساعدنا ذلك في العثور على فرص للتحسين.