Magento Checkout Street Lineの自動入力バグ

最近、Magentoストアの多くの注文でストリートライン1がストリートライン2にコピーされていることに気付きました。

少し掘り下げたところ、Chromeのオートフィルに関連しているようです。フォームフィールドを見ると、Magentoは両方のストリートラインのフィールド名としてbilling [street] []およびshipping [street] []を使用しています。そのため、Chromeはどちらがどちらであるかを判断できず、アドレス行1を両方のフィールドに自動入力します。

フォーム入力フィールドでautocomplete属性を使用してリンク先のフィールドを示すことができるという情報が浮かんでいますが、これはサポートされておらず機能しません。実際、それを行おうとすると、フォーム全体でオートコンプリートが無効になります。フィールド名も変更しようとしましたが、チェックアウトに失敗します。コードを深く掘り下げて、フォームのフィールド名を変更し、参照されている場所、PayPalに送信された場所、DBに保存された場所などを変更する必要があるようです。これは悪夢のようです。

誰もこれに対処したり、提案がありますか？

x-autocompletetypeこれは実験的な機能ですが、-attributeを試すこともできます。

<input x-autocompletetype="address-line1" />
<input x-autocompletetype="address-line2" />

ちょっとした修正を行い、入力に「読み取り専用」属性を追加し、次のJSスニペットでonfocus属性を追加します。

onfocus="this.removeAttribute('readonly');"

したがって、全体は次のようになります。

<input type="text" title="Street Address 2" name="billing[street][]" id="billing:street2" value="" class="input-text " readonly onfocus="this.removeAttribute('readonly');">

Chromeはフィールドに自動入力できませんが、ユーザーがフィールドをクリックするとJSがトリガーされるため、ユーザーは手動で入力できます。

ファックス入力に対してもこれを行います。Chromeは電話番号をその番号にコピーすることを好みます。

開発者は、オートコンプリート属性を使用して、ブラウザが特定のフォームフィールドに入力する方法を制御できます。たとえば、番地を期待している場合は、autocomplete = "address-line1"を使用して、期待していることをブラウザに示唆できます。これにより、ブラウザがWebサイト上のフォームフィールドを誤って推測し、ユーザーエクスペリエンスが低下するのを防ぎます。

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

を使用x-autocompletetype="address-line2"すると、最新のChrome（65.0.3325.106）で動作しないように見えますが、最初の番地が両方の入力に複製されます。しかし、autocomplete="address-line1"そしてautocomplete="address-line2"予想通りに動作するようです。

詳細はこちら：https : //developers.google.com/web/updates/2015/06/checkout-faster-with-autofill#address