ฉันพบปัญหาเกี่ยวกับพฤติกรรมการป้อนอัตโนมัติของ Chrome ในหลายรูปแบบ

เขตข้อมูลในแบบฟอร์มทั้งหมดมีชื่อทั่วไปและถูกต้องมากเช่น "อีเมล", "ชื่อ" หรือ "รหัสผ่าน" และพวกเขายังได้autocomplete="off"ตั้งค่า

การตั้งค่าการเติมข้อความอัตโนมัติได้ปิดการใช้งานการเติมข้อความอัตโนมัติเรียบร้อยแล้วโดยที่ค่าแบบเลื่อนลงปรากฏขึ้นเมื่อคุณเริ่มพิมพ์ แต่ไม่ได้เปลี่ยนค่าที่ Chrome เติมข้อมูลในฟิลด์โดยอัตโนมัติ

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

ทางออกเดียวในปัจจุบันที่ฉันนึกได้คือการสร้างชื่ออินพุตแบบกำหนดเองแบบไดนามิกจากนั้นแยกค่าบนแบ็กเอนด์ มีแท็กหรือนิสัยใจคอที่เปลี่ยนพฤติกรรมการป้อนอัตโนมัติที่สามารถใช้แก้ไขปัญหานี้ได้หรือไม่?

สำหรับ Chrome เวอร์ชันใหม่คุณสามารถใส่autocomplete="new-password"รหัสผ่านลงในช่องได้เลย ฉันตรวจสอบแล้วทำงานได้ดี

มีเคล็ดลับจากนักพัฒนา Chrome ในการสนทนานี้: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS โปรดทราบว่า Chrome จะพยายามสรุปพฤติกรรมการป้อนอัตโนมัติจากชื่อรหัสและเนื้อหาข้อความใด ๆ ที่สามารถรับได้รอบ ๆ ฟิลด์รวมถึงป้ายกำกับและโหนดข้อความโดยพลการ หากมีโทเค็นการเติมข้อความอัตโนมัติเหมือนstreet-addressในบริบท Chrome จะป้อนอัตโนมัติดังกล่าว ฮิวริสติกอาจสร้างความสับสนได้เนื่องจากบางครั้งก็เรียกเฉพาะเมื่อมีเขตข้อมูลเพิ่มเติมในแบบฟอร์มหรือไม่หากมีเขตข้อมูลน้อยเกินไปในแบบฟอร์ม โปรดทราบด้วยว่าautocomplete="no"จะใช้งานได้ แต่autocomplete="off"จะไม่ใช้เพื่อเหตุผลทางประวัติศาสตร์ autocomplete="no"คุณกำลังบอกเบราว์เซอร์ว่าฟิลด์นี้ควรมีการเติมให้อัตโนมัติโดยอัตโนมัติเป็นฟิลด์ที่เรียกว่า"no"คือคุณบอกเบราว์เซอร์ที่ข้อมูลนี้ควรจะอัตโนมัติเสร็จเป็นเขตที่เรียกว่าหากคุณสร้างautocompleteชื่อสุ่มที่ไม่ซ้ำกันคุณปิดการใช้งานอัตโนมัติสมบูรณ์

หากผู้ใช้ของคุณได้เข้าชมในรูปแบบที่เลวร้ายข้อมูลป้อนอัตโนมัติของพวกเขาอาจจะเสียหาย ให้พวกเขาเข้าไปด้วยตนเองและแก้ไขข้อมูลป้อนอัตโนมัติใน Chrome อาจเป็นการดำเนินการที่จำเป็นจากพวกเขา

ฉันเพิ่งค้นพบว่าหากคุณมีชื่อผู้ใช้และรหัสผ่านที่จดจำได้สำหรับไซต์ Chrome เวอร์ชันปัจจุบันจะป้อนชื่อผู้ใช้ / ที่อยู่อีเมลของคุณในฟิลด์ก่อนtype=passwordฟิลด์ใด ๆโดยอัตโนมัติ มันไม่สนใจสิ่งที่เรียกว่าเขตข้อมูล - เพียงแค่ถือว่าเขตข้อมูลก่อนที่รหัสผ่านจะเป็นชื่อผู้ใช้ของคุณ

โซลูชั่นเก่า

เพียงแค่ใช้<form autocomplete="off">และจะป้องกันการใส่รหัสผ่านล่วงหน้ารวมถึงการกรอกข้อมูลตามประเภทของฟิลด์ตามสมมติฐานที่เบราว์เซอร์อาจทำ (ซึ่งมักจะผิด) เมื่อเทียบกับการใช้<input autocomplete="off">ซึ่งดูเหมือนว่าจะถูกละเว้นโดยป้อนรหัสผ่านโดยอัตโนมัติ (ใน Chrome นั่นคือ Firefox จะเชื่อฟัง)

โซลูชั่นที่อัปเดตแล้ว

<form autocomplete="off">โครเมี่ยมในขณะนี้ละเว้น ดังนั้นวิธีแก้ปัญหาดั้งเดิมของฉัน (ซึ่งฉันลบไปแล้ว) จึงกลายเป็นความโกรธทั้งหมด

เพียงสร้างฟิลด์สองฟิลด์และทำให้ซ่อนด้วย "display: none" ตัวอย่าง:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

จากนั้นให้วางเขตข้อมูลจริงของคุณไว้ด้านล่าง

อย่าลืมเพิ่มความคิดเห็นหรือคนอื่น ๆ ในทีมของคุณจะสงสัยว่าคุณกำลังทำอะไร!

อัปเดตมีนาคม 2559

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

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

โค้ดตัวอย่างโดยใช้ jQuery (สมมติว่าคุณให้คลาสปลอมในฟิลด์):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

อัปเดตกรกฎาคม 2561

โซลูชันของฉันใช้งานไม่ได้อีกต่อไปเนื่องจากผู้เชี่ยวชาญด้านการต่อต้านการใช้งานของ Chrome ทำงานหนัก แต่พวกเขาได้โยนเราในรูปแบบของ:

<input type="password" name="whatever" autocomplete="new-password" />

งานนี้และส่วนใหญ่แก้ปัญหา

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

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

อัพเดท มี.ค. 2563

ยังไม่ชัดเจนว่าเมื่อใดและเมื่อใดโซลูชันนี้ยังใช้งานได้ ดูเหมือนว่าจะยังคงทำงานบางครั้ง แต่ไม่ตลอดเวลา

ในความคิดเห็นด้านล่างคุณจะพบคำแนะนำเล็กน้อย หนึ่งที่เพิ่มโดย @anilyeni อาจคุ้มค่ากับการตรวจสอบเพิ่มเติม:

ตามที่ฉันสังเกตเห็นautocomplete="off"ทำงานบน Chrome 80 หากมีองค์ประกอบน้อยกว่า 3 <form>ตัว ฉันไม่รู้ว่าอะไรเป็นตรรกะหรือเอกสารที่เกี่ยวข้องเกี่ยวกับมัน

นอกจากนี้รายการนี้จาก @dubrox อาจเกี่ยวข้องด้วยแม้ว่าฉันจะยังไม่ได้ทดสอบ:

ขอบคุณมากสำหรับเคล็ดลับ แต่โปรดอัปเดตคำตอบเพราะdisplay:none;มันใช้งานไม่ได้อีกต่อไป แต่position: fixed;top:-100px;left:-100px; width:5px;ทำ :)

อัปเดต APRIL 2020

ค่าพิเศษสำหรับ chrome สำหรับคุณลักษณะนี้กำลังทำงาน: (ทดสอบกับอินพุต - แต่ไม่ใช่โดยฉัน) autocomplete="chrome-off"

หลังจากเดือนและเดือนแห่งการดิ้นรนฉันพบว่าวิธีแก้ปัญหานั้นง่ายกว่าที่คุณคิด:

แทนที่จะautocomplete="off"ใช้autocomplete="false" ;)

เรียบง่ายเช่นนั้นและใช้งานได้อย่างมีเสน่ห์ใน Google Chrome เช่นกัน!

อัปเดตสิงหาคม 2019 (ให้เครดิตกับ @JonEdiger ในความคิดเห็น)

หมายเหตุ: ข้อมูลจำนวนมากออนไลน์บอกว่าเบราว์เซอร์ถือว่า autocomplete = 'false' เป็นเหมือนกับ autocomplete = 'off' อย่างน้อยในนาทีนี้การป้องกันการเติมข้อความอัตโนมัติสำหรับเบราว์เซอร์ทั้งสามนี้

ตั้งไว้ที่ระดับรูปแบบจากนั้นสำหรับอินพุตที่คุณต้องการปิดตั้งค่าที่ไม่ถูกต้องเช่น 'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

บางครั้งแม้autocomplete=offจะไม่ป้องกันการกรอกข้อมูลประจำตัวในช่องที่ไม่ถูกต้อง

วิธีหลีกเลี่ยงปัญหาคือปิดใช้งานการป้อนอัตโนมัติของเบราว์เซอร์โดยใช้โหมดอ่านอย่างเดียวและตั้งค่าการเขียนที่โฟกัสได้:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

focusเหตุการณ์ที่เกิดขึ้นในการคลิกเมาส์และแท็บผ่านทุ่งนา

ปรับปรุง:

Mobile Safari ตั้งค่าเคอร์เซอร์ในฟิลด์ แต่ไม่แสดงแป้นพิมพ์เสมือนจริง วิธีแก้ปัญหาใหม่นี้ใช้งานได้เหมือน แต่เคยจัดการกับแป้นพิมพ์เสมือนจริง:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

การสาธิตสดhttps://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

คำอธิบาย:เบราว์เซอร์เติมข้อมูลประจำตัวโดยอัตโนมัติไปยังช่องข้อความที่ไม่ถูกต้อง

กรอกข้อมูลที่ไม่ถูกต้องเช่นกรอกที่อยู่อีเมลด้วยที่อยู่อีเมล

บางครั้งฉันสังเกตเห็นพฤติกรรมแปลก ๆ นี้ใน Chrome และ Safari เมื่อมีรหัสผ่านในรูปแบบเดียวกัน ฉันเดาว่าเบราว์เซอร์จะมองหาฟิลด์รหัสผ่านเพื่อใส่ข้อมูลรับรองที่คุณบันทึกไว้ จากนั้นจะป้อนชื่อผู้ใช้โดยอัตโนมัติลงในฟิลด์ป้อนข้อความที่ใกล้ที่สุดซึ่งปรากฏก่อนฟิลด์รหัสผ่านใน DOM (เพียงเดาเนื่องจากการสังเกต) เนื่องจากเบราว์เซอร์เป็นอินสแตนซ์สุดท้ายและคุณไม่สามารถควบคุมได้

การแก้ไขแบบอ่านอย่างเดียวด้านบนนี้ใช้งานได้สำหรับฉัน

หากคุณกำลังใช้คุณสมบัติของช่องค้นหาให้ลองตั้งค่าtypeคุณลักษณะsearchดังต่อไปนี้:

<input type="search" autocomplete="off" />

สิ่งนี้ใช้ได้กับฉันใน Chrome v48 และดูเหมือนจะเป็นมาร์กอัปที่ถูกกฎหมาย:

https://www.w3.org/wiki/HTML/Elements/input/search

ลองสิ่งนี้ ฉันรู้ว่าคำถามนั้นค่อนข้างเก่า แต่นี่เป็นแนวทางที่แตกต่างสำหรับปัญหา

ฉันยังสังเกตเห็นว่าปัญหามาเหนือ passwordสนาม

ฉันลองทั้งสองวิธีเช่น

<form autocomplete="off"> และ <input autocomplete="off">ไม่มีใครทำงานให้ฉันได้

ดังนั้นฉันจึงแก้ไขโดยใช้ตัวอย่างด้านล่าง - เพียงเพิ่มฟิลด์ข้อความอื่นด้านบนฟิลด์ประเภทรหัสผ่านและสร้าง display:noneเพียงแค่เพิ่มฟิลด์ข้อความอื่นเหนือฟิลด์พิมพ์รหัสผ่านและทำให้มัน

บางสิ่งเช่นนี้

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

หวังว่ามันจะช่วยใครซักคน

ฉันไม่รู้ว่าทำไม แต่สิ่งนี้ช่วยและทำงานให้ฉัน

<input type="password" name="pwd" autocomplete="new-password">

ฉันไม่รู้ว่าทำไม แต่autocompelete = "รหัสผ่านใหม่"ปิดใช้งานการป้อนอัตโนมัติ มันทำงานในรุ่นโครเมี่ยม49.0.2623.112ล่าสุด

สำหรับฉันง่าย

<form autocomplete="off" role="presentation">

ทำมัน

ทดสอบกับหลาย ๆ เวอร์ชันแล้วลองครั้งสุดท้ายเมื่อวันที่ 56.0.2924.87

คุณต้องเพิ่มคุณสมบัตินี้:

autocomplete="new-password"

ลิงค์ที่มา: บทความเต็ม

มันง่ายและยุ่งยากมาก :)

Google Chrome พื้นค้นหาองค์ประกอบรหัสผ่านทุกครั้งแรกที่มองเห็นภายใน<form>, <body>และ<iframe>แท็กเพื่อเปิดใช้งานเติมเงินอัตโนมัติสำหรับพวกเขาเพื่อที่จะปิดการใช้งานนี้คุณจะต้องเพิ่มองค์ประกอบรหัสผ่านหุ่นดังต่อไปนี้:

1. • หากองค์ประกอบรหัสผ่านของคุณอยู่ใน<form>แท็กคุณต้องใส่องค์ประกอบจำลองเป็นองค์ประกอบแรกในแบบฟอร์มของคุณทันทีหลังจาก<form>เปิดแท็ก

   • หากองค์ประกอบรหัสผ่านของคุณไม่อยู่ใน<form>แท็กให้ใส่องค์ประกอบจำลองเป็นองค์ประกอบแรกในหน้า html ของคุณทันทีหลังจาก<body>เปิดแท็ก

2. คุณต้องซ่อนองค์ประกอบจำลองโดยไม่ใช้ css display:noneดังนั้นโดยทั่วไปให้ใช้สิ่งต่อไปนี้เป็นองค์ประกอบรหัสผ่านจำลอง

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

นี่คือโซลูชันที่ฉันเสนอเนื่องจาก Google ยืนยันที่จะเอาชนะทุกการทำงานที่ผู้คนดูเหมือนจะทำ

ตัวเลือก 1 - เลือกข้อความทั้งหมดเมื่อคลิก

ตั้งค่าของอินพุตเป็นตัวอย่างสำหรับผู้ใช้ของคุณ (เช่นyour@email.com) หรือเลเบลของฟิลด์ (เช่นEmail) และเพิ่มคลาสที่เรียกfocus-selectไปยังอินพุตของคุณ:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

และนี่คือ jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

ฉันไม่เห็น Chrome เลยยุ่งกับค่าจริงๆ มันคงจะบ้าแน่ ๆ หวังว่านี่จะเป็นทางออกที่ปลอดภัย

ตัวเลือกที่ 2 - ตั้งค่าอีเมลเป็นช่องว่างแล้วลบ

สมมติว่าคุณมีสองอินพุตเช่นอีเมลและรหัสผ่านตั้งค่าของฟิลด์อีเมลเป็น" "(ช่องว่าง) และเพิ่มคุณสมบัติ / ค่าautocomplete="off"แล้วล้างสิ่งนี้ด้วย JavaScript คุณสามารถปล่อยให้รหัสผ่านว่างเปล่า

หากผู้ใช้ไม่มี JavaScript ด้วยเหตุผลบางประการตรวจสอบให้แน่ใจว่าคุณได้ตัดแต่งอินพุตเซิร์ฟเวอร์ (อาจเป็นไปได้) ในกรณีที่ไม่มีพื้นที่ว่าง

นี่คือ jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

ฉันตั้งค่าการหมดเวลาเป็น15เพราะ5ดูเหมือนว่าจะทำงานเป็นครั้งคราวในการทดสอบของฉันดังนั้นการเพิ่มจำนวนนี้จึงดูเหมือนเป็นการเดิมพันที่ปลอดภัย

การไม่ตั้งค่าเริ่มต้นเป็นช่องว่างจะทำให้ Chrome ปล่อยให้อินพุตเป็นสีเหลืองราวกับว่ามีการป้อนอัตโนมัติ

ตัวเลือก 3 - อินพุตที่ซ่อนอยู่

วางสิ่งนี้ไว้ที่จุดเริ่มต้นของแบบฟอร์ม:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

ตรวจสอบให้แน่ใจว่าคุณเก็บบันทึกย่อ HTML ไว้เพื่อให้ผู้พัฒนารายอื่นไม่ได้ลบออก! ตรวจสอบให้แน่ใจว่าชื่อของอินพุตที่ซ่อนนั้นเกี่ยวข้อง

ใช้ css text-security: discโดยไม่ใช้type = password type

HTML

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

CSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

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

autocomplete="nope"

ฉันพบว่าการเพิ่มสิ่งนี้ลงในแบบฟอร์มทำให้ Chrome ไม่สามารถใช้การป้อนอัตโนมัติ

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

พบได้ที่นี่ https://code.google.com/p/chromium/issues/detail?id=468153#hc41

น่าผิดหวังจริง ๆ ที่ Chrome ได้ตัดสินใจว่ารู้ดีกว่านักพัฒนาเกี่ยวกับการเติมข้อความอัตโนมัติเมื่อใด มีความรู้สึกที่แท้จริงกับ Microsoft

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

เพิ่มแอตทริบิวต์แบบอ่านอย่างเดียวไปยังแท็กพร้อมกับการลบเหตุการณ์ onfocus เพื่อแก้ไขปัญหา

สำหรับคอมโบรหัสผ่านชื่อผู้ใช้นี่เป็นปัญหาที่แก้ไขได้ง่าย การวิเคราะห์พฤติกรรมของ Chrome มองหารูปแบบ:

<input type="text">

ติดตามโดย:

<input type="password">

เพียงทำผิดขั้นตอนนี้โดยการยกเลิกสิ่งนี้:

<input type="text">
<input type="text" onfocus="this.type='password'">

ไมค์เนลสันให้การแก้ปัญหาไม่ได้สำหรับฉันใน Chrome 50.0.2661.102 m เพียงเพิ่มองค์ประกอบอินพุตประเภทเดียวกันพร้อมจอแสดงผล: ไม่มีการตั้งค่าใด ๆ ที่จะไม่ปิดใช้งานเบราว์เซอร์ดั้งเดิมอัตโนมัติอีกต่อไป ตอนนี้จำเป็นต้องทำซ้ำแอตทริบิวต์ชื่อของช่องป้อนข้อมูลที่คุณต้องการปิดการใช้งานการเติมข้อความอัตโนมัติ

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

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

ในปี 2559 Google Chrome เริ่มเพิกเฉยautocomplete=offแม้ว่าจะอยู่ใน W3C คำตอบที่โพสต์ :

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

ที่สำคัญกล่าว: เรารู้ดีกว่าสิ่งที่ผู้ใช้ต้องการ

พวกเขาเปิดบั๊กอื่นเพื่อโพสต์กรณีการใช้ที่ถูกต้องเมื่อต้องการเติมข้อความอัตโนมัติ = ปิด

ฉันไม่ได้เห็นปัญหาเกี่ยวกับการเติมข้อความอัตโนมัติผ่านแอปพลิเคชัน B2B ทั้งหมดของฉัน แต่มีเฉพาะอินพุตประเภทรหัสผ่านเท่านั้น

ป้อนอัตโนมัติในขั้นตอนนี้หากมีฟิลด์รหัสผ่านใด ๆ บนหน้าจอแม้แต่ฟิลด์ที่ซ่อนอยู่ ในการแยกลอจิกนี้คุณสามารถใส่รหัสผ่านแต่ละฟิลด์ลงในฟอร์มของตัวเองถ้ามันไม่ทำลายลอจิกหน้าของคุณเอง

<input type=name >

<form>
    <input type=password >
</form>

หากคุณมีปัญหาเกี่ยวกับการรักษาตัวแทน แต่ปิดใช้งานการป้อนอัตโนมัติของ Chrome ฉันพบวิธีแก้ปัญหานี้

ปัญหา

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

ตัวอย่างด้านบนยังคงสร้างปัญหาการป้อนอัตโนมัติ แต่ถ้าคุณใช้required="required"และบาง CSS คุณสามารถทำซ้ำตัวยึดตำแหน่งและ Chrome จะไม่รับแท็ก

สารละลาย

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

ฉันไม่ชอบการสร้างเขตข้อมูลที่ซ่อนอยู่ฉันคิดว่าการทำให้เป็นเช่นนั้นจะทำให้เกิดความสับสนอย่างรวดเร็ว

ในฟิลด์อินพุตที่คุณต้องการหยุดจากการทำให้สมบูรณ์อัตโนมัติสิ่งนี้จะทำงาน ทำให้ฟิลด์อ่านอย่างเดียวและเน้นลบคุณลักษณะนั้นออกเช่นนี้

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

สิ่งนี้ทำคือคุณต้องลบคุณลักษณะอ่านอย่างเดียวโดยการเลือกฟิลด์และในเวลานั้นคุณมีแนวโน้มมากที่สุดที่คุณจะใส่ข้อมูลผู้ใช้ของคุณเองและป้อนอัตโนมัติป้อนที่จะใช้

ค่าที่ป้อนไว้ก่อนหน้านี้โดย Chrome จะแสดงเป็นรายการตัวเลือกแบบเลื่อนลงซึ่งสามารถปิดใช้งานโดยการเติมข้อความอัตโนมัติ = ปิดที่อยู่ที่บันทึกไว้อย่างชัดเจนในการตั้งค่าขั้นสูงของ Chrome ให้ป๊อปอัปอัตโนมัติเมื่อฟิลด์ที่อยู่ได้รับโฟกัส แต่จะอนุญาตให้โครเมี่ยมแสดงค่าแคชในดรอปดาวน์

ในช่องป้อนข้อมูล html ต่อไปนี้จะปิดทั้งสอง

Role="presentation" & autocomplete="off"

ในขณะที่การเลือกช่องป้อนข้อมูลสำหรับป้อนที่อยู่อัตโนมัติ Chrome จะละเว้นช่องป้อนข้อมูลเหล่านั้นซึ่งไม่มีองค์ประกอบ HTML ป้ายกำกับก่อนหน้า

เพื่อให้แน่ใจว่าตัวแยกวิเคราะห์โครมจะละเว้นช่องป้อนข้อมูลสำหรับป๊อปอัปที่อยู่ป้อนอัตโนมัติปุ่มที่ซ่อนอยู่หรือการควบคุมรูปภาพสามารถเพิ่มระหว่างฉลากและกล่องข้อความ การทำเช่นนี้จะทำให้ลำดับการแยกวิเคราะห์โครเมี่ยมของฉลาก - การสร้างคู่ป้อนอัตโนมัติ ช่องทำเครื่องหมายจะถูกละเว้นขณะแยกวิเคราะห์ฟิลด์ที่อยู่

Chrome ยังพิจารณาแอตทริบิวต์ "สำหรับ" ในองค์ประกอบป้ายกำกับด้วย มันสามารถใช้ในการแบ่งลำดับการแยกของโครเมี่ยม

เนื่องจากเราทุกคนมีปัญหานี้ฉันใช้เวลาในการเขียนส่วนขยาย jQuery ที่ใช้งานได้สำหรับปัญหานี้ Google ต้องติดตามมาร์กอัป html ไม่ใช่เพราะเราติดตาม Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

เพียงเพิ่มไฟล์นี้ลงในไฟล์เช่น/js/jquery.extends.jsและรวมไว้ใน jQuery ที่ผ่านมา นำไปใช้กับองค์ประกอบแบบฟอร์มแต่ละรายการเมื่อโหลดเอกสารเช่นนี้:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle พร้อมการทดสอบ

ลองใช้jQueryรหัสต่อไปนี้ซึ่งใช้งานได้สำหรับฉัน

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

มีสองชิ้นสำหรับสิ่งนี้ Chrome และเบราว์เซอร์อื่น ๆ จะจดจำค่าที่ป้อนไว้ก่อนหน้านี้สำหรับชื่อฟิลด์และแสดงรายการการเติมข้อความอัตโนมัติให้กับผู้ใช้ตามนั้น (โดยเฉพาะอินพุตประเภทรหัสผ่านจะไม่ถูกจดจำด้วยวิธีนี้ด้วยเหตุผลที่ชัดเจน) คุณสามารถเพิ่มautocomplete="off"เพื่อป้องกันสิ่งนี้ในฟิลด์อีเมลของคุณ

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

ตามรายงานข้อบกพร่องของ Chromium # 352347 Chrome จะไม่เคารพอีกต่อไปautocomplete="off|false|anythingelse"ไม่ว่าในรูปแบบหรืออินพุต

ทางออกเดียวที่ทำงานได้สำหรับฉันคือการเพิ่มฟิลด์รหัสผ่านจำลอง :

<input type="password" class="hidden" />
<input type="password" />

เมื่อตั้งค่าautocompleteให้offทำงานที่นี่ฉันมีตัวอย่างซึ่ง Google ใช้ในหน้าค้นหา ฉันพบสิ่งนี้จากองค์ประกอบการตรวจสอบ

แก้ไข : ในกรณีที่offไม่ได้ทำงานแล้วลองหรือfalse nofillในกรณีของฉันมันใช้งานได้กับ chrome รุ่น 48.0

นี่คือแฮ็คสกปรก -

คุณมีองค์ประกอบของคุณที่นี่ (เพิ่มแอตทริบิวต์ที่ปิดใช้งาน):

<input type="text" name="test" id="test" disabled="disabled" />

จากนั้นที่ด้านล่างของหน้าเว็บให้ใส่ JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

โซลูชันที่แตกต่าง webkit ดังที่ได้กล่าวไปแล้วเมื่อใดก็ตามที่ Chrome พบช่องรหัสผ่านมันจะทำการเติมอีเมลให้โดยอัตโนมัติ AFAIK สิ่งนี้ไม่คำนึงถึงการเติมข้อความอัตโนมัติ = [อะไรก็ตาม]

หากต้องการหลีกเลี่ยงการเปลี่ยนแปลงประเภทการป้อนข้อมูลเป็นข้อความและใช้แบบอักษรความปลอดภัยของ webkit ในรูปแบบที่คุณต้องการ

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

จากสิ่งที่ฉันเห็นนี้เป็นอย่างน้อยปลอดภัยเท่ากับ input type = password มันคัดลอกและวางปลอดภัย อย่างไรก็ตามมันมีช่องโหว่โดยการลบสไตล์ซึ่งจะลบเครื่องหมายดอกจันแน่นอนว่า input type = password สามารถเปลี่ยนเป็น input type = text ในคอนโซลได้อย่างง่ายดายเพื่อเปิดเผยรหัสผ่านที่ป้อนอัตโนมัติดังนั้นจึงเหมือนกันมาก

วิธีเดียวที่เหมาะกับฉันคือ: (จำเป็นต้องใช้ jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

ฉันประสบปัญหาเดียวกัน และนี่คือโซลูชันสำหรับปิดการใช้งานชื่อผู้ใช้และรหัสผ่านป้อนอัตโนมัติบน Chrome (เพิ่งทดสอบด้วย Chrome เท่านั้น)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">