אירוע המילוי האוטומטי נמצא בגרסת מקור לניסיון

Jeremy Wagner

תאריך פרסום: 10 ביוני 2026

טפסים הם נקודת אינטראקציה נפוצה באינטרנט, אבל הם גורמים לא מעט חיכוך למשתמשים. דפדפנים מציעים כבר הרבה זמן יכולות של מילוי אוטומטי כדי לצמצם את החיכוך הזה, ולחסוך מהמשתמשים משימות חוזרות כמו הזנת מספרים של כרטיסי אשראי, כתובות ופרטי כניסה.

למפתחים, הטיפול במילוי אוטומטי של טפסים הוא אתגר. מפתחים יכולים להאזין לאירועים input או change ברכיבי <form>, אבל האירועים האלה לא מציינים איך הנתונים הגיעו לשדה. העובדה הזו מקשה על הפעלת לוגיקה ספציפית – כמו התאמות של פריסת הדף – בדיוק ברגע שבו הטופס מתמלא אוטומטית. autofillאירוע חדש – עכשיו זמין כגרסת מקור לניסיון ב-Chrome

החל מ-Chrome 147 – מספק אות שימושי למפתחים כשהדפדפן עוזר למשתמש במילוי אוטומטי.

‫autofill: פתרון בעיות שלא נפתרו על ידי input ו-change

האירועים input ו-change הם אותות כלליים שלא מבחינים בין מצב שבו המשתמש ממלא שדה בטופס באופן ידני לבין מצב שבו נעשה שימוש במילוי אוטומטי. העובדה שאין אירוע ייעודי למילוי אוטומטי של טפסים מקשה על מפתחים לבצע באופן מהימן עדכונים בממשק המשתמש שעוזרים למשתמשים למלא טפסים. לדוגמה, משתמש מציין את מדינת המגורים שלו, ומופיע שדה סמוך שבו הוא צריך לציין את המדינה או המחוז שבהם הוא גר, בהתאם למדינה. הפעלת העדכון הזה בתגובה לבקשה למילוי אוטומטי היא צפויה יותר למפתחים ושימושית יותר למשתמשים. האירוע autofill פותר את הבעיה הזו.

האירוע autofill מופעל רגע לפני שהדפדפן ממלא טופס באופן אוטומטי. ה-listener של האירוע מקבל מערך של autofillValues למילוי ופונקציה refill. ה-listener יכול להפעיל את הפונקציה refill כדי לבקש מהדפדפן למלא מחדש את הטופס, למשל אם ה-listener שינה את התוכן. ניקח לדוגמה את תגי העיצוב של הטופס הבא:

<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() נקרא כדי להנחות את הדפדפן למלא מחדש את הטופס, וכך פעולת המילוי האוטומטי חוזרת על עצמה בטופס ששוּנה.

אם אתם רוצים לראות תרחישי שימוש מורכבים יותר, יואב וייס מ-Shopify יצר שני סרטוני הדגמה:autofill

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 ומאפיין ה-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.

זיהוי ומדידה של מילוי אוטומטי של טפסים

נתוני Analytics לגבי מילוי אוטומטי של טפסים חשובים לעסקים, אבל קשה למדוד מילוי אוטומטי בטפסים באמצעות תכונות קיימות באינטרנט. לדוגמה, נהוג להסתמך על פסאודו-המחלקה :autofill של CSS, שלא נכללת ב-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);
});

הדוגמה הזו היא פשוטה, אבל היא ממחישה כמה קל יותר לתעד את המידע הזה. אתם יכולים לארגן ולאסוף נתונים אנליטיים של מילוי אוטומטי באופן שמתאים לכם, בלי פתרונות עקיפים שקשה ליישם ושאי אפשר לסמוך עליהם.

הרשמה לגרסת המקור לניסיון

האירוע autofill הוא חלק מגרסת מקור לניסיון של Chrome, וההשתתפות שלכם יכולה לעזור לנו לשפר את Chrome. ניסויי מקור מאפשרים לכם לבדוק תכונות ניסיוניות עם משתמשים אמיתיים ולספק משוב לצוות Chrome לפני שממשק ה-API הופך לחלק מפלטפורמת האינטרנט.

כדי להתחיל להשתמש באירוע autofill באתר, צריך להירשם כאן לניסיון של התכונה Origin. ‫Chrome ישמח לראות איך אתם משתמשים בו, ואיך זה יכול לעזור לנו למצוא הזדמנויות לשיפור.