ข้อผิดพลาดในการป้อนข้อความอัตโนมัติของถนน Magento Checkout

ฉันได้สังเกตเห็นเมื่อเร็ว ๆ นี้ว่าคำสั่งซื้อจำนวนหนึ่งในร้าน Magento ของเรามีการคัดลอกรายการที่ 1 ลงในรายการที่ 2

ฉันขุดบ้างและดูเหมือนว่าจะเกี่ยวข้องกับการป้อนอัตโนมัติของ Chrome หากคุณดูที่ฟิลด์แบบฟอร์มวีโอไอพีจะใช้การเรียกเก็บเงิน [ถนน] []และการจัดส่ง [ถนน] []เป็นชื่อฟิลด์สำหรับทั้งสองบรรทัด ดังนั้น Chrome จึงไม่สามารถระบุได้ว่ารายการใดเป็นรายการใดและป้อนที่อยู่บรรทัดที่ 1 ลงในทั้งสองฟิลด์โดยอัตโนมัติ

มีข้อมูลบางอย่างลอยอยู่รอบ ๆ ซึ่งคุณสามารถใช้แอตทริบิวต์การเติมข้อความอัตโนมัติในฟิลด์ป้อนข้อมูลแบบฟอร์มเพื่อระบุว่าควรจะเชื่อมโยงกับฟิลด์ใด แต่ไม่ได้รับการสนับสนุนและใช้งานไม่ได้ ในความเป็นจริงถ้าคุณพยายามทำเช่นนั้นมันจะปิดใช้งานการเติมข้อความอัตโนมัติในแบบฟอร์มทั้งหมด ฉันพยายามเปลี่ยนชื่อฟิลด์ด้วย ดูเหมือนว่าฉันจะต้องขุดลึกลงไปในรหัสและเปลี่ยนชื่อฟิลด์ในแบบฟอร์มและทุกที่ที่มีการอ้างอิงส่งไปยัง PayPal บันทึกไว้ในฐานข้อมูล ฯลฯ ดูเหมือนว่าจะเป็นฝันร้าย

มีใครจัดการกับเรื่องนี้และ / หรือมีข้อเสนอแนะหรือไม่?

คุณยังสามารถลองx-autocompletetype--attribute ได้แม้ว่านี่จะเป็นคุณลักษณะทดลอง:

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

แก้ไขเล็กน้อยอย่างรวดเร็วเพิ่มแอตทริบิวต์ 'อ่านได้อย่างเดียว' ไปยังอินพุตและแอตทริบิวต์ onfocus พร้อมด้วยข้อมูลโค้ด JS ต่อไปนี้:

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 ชอบคัดลอกหมายเลขโทรศัพท์ไปยังหมายเลขนั้น

แอตทริบิวต์การเติมข้อความอัตโนมัติเป็นวิธีการหนึ่งสำหรับคุณผู้พัฒนาเพื่อควบคุมวิธีที่เบราว์เซอร์ควรเติมฟิลด์แบบฟอร์มที่กำหนด ตัวอย่างเช่นถ้าคุณคาดหวังว่าเป็นที่อยู่ถนนคุณสามารถแบะท่าเบราว์เซอร์ที่คุณคาดหวังว่ามันโดยใช้การเติมข้อความอัตโนมัติ = "ที่อยู่บรรทัดที่ 1" วิธีนี้จะช่วยป้องกันไม่ให้เบราว์เซอร์คาดเดาฟิลด์ฟอร์มบนเว็บไซต์ของคุณอย่างไม่ถูกต้องซึ่งอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี

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