ฉันสร้างเว็บแอปพลิเคชั่นซึ่งใช้แท็กบ็อกซ์ดรอปดาวน์ วิธีนี้ใช้งานได้ดีในทุกเบราว์เซอร์ยกเว้นเบราว์เซอร์ Chrome (เวอร์ชัน 21.0.1180.89)

แม้จะมีทั้งinputฟิลด์และformฟิลด์ที่มีแอautocomplete="off"ททริบิว แต่ Chrome ยืนยันที่จะแสดงประวัติแบบเลื่อนลงของรายการก่อนหน้าสำหรับฟิลด์ซึ่งจะกำจัดรายการแท็กบ็อกซ์

UPDATE

ดูเหมือนว่าตอนนี้ Chrome จะละเว้นstyle="display: none;"หรือstyle="visibility: hidden;แอตทริบิวต์

คุณสามารถเปลี่ยนเป็น:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

จากประสบการณ์ของฉัน Chrome จะเติมข้อความให้อัตโนมัติก่อน<input type="password">และหลัง<input>โดยอัตโนมัติ ดังนั้นฉันได้เพิ่ม:

<input style="display:none">
<input type="password" style="display:none">

ไปด้านบนของ<form>และกรณีได้รับการแก้ไข

ป้องกันการเติมชื่อผู้ใช้ (หรืออีเมล) และรหัสผ่านโดยอัตโนมัติ:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

ป้องกันฟิลด์เติมข้อความอัตโนมัติ ( อาจไม่ทำงาน ):

<input type="text" name="field" autocomplete="nope">

คำอธิบาย:

autocompleteยังคงทำงานใน<input>แม้จะมีautocomplete="off"แต่คุณสามารถเปลี่ยนเป็นสตริงสุ่มเช่นoffnope

"โซลูชัน"อื่น ๆสำหรับการปิดใช้งานการเติมข้อความอัตโนมัติในฟิลด์ (ไม่ใช่วิธีที่ถูกต้อง แต่จะใช้งานได้):

1

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (onload):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

หรือใช้jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2

HTML:

<form id="form"></form>

JS (onload):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

หรือใช้jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

ในการเพิ่มมากกว่าหนึ่งช่องโดยใช้ jQuery:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

ทำงานใน:

• Chrome: 49+

• Firefox: 44+

ดูเหมือนว่า Chrome จะไม่สนใจautocomplete="off"เว้นแต่จะอยู่บน<form autocomplete="off">แท็ก

วิธีการที่ทันสมัย

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

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

ส่วนถัดไปเป็นทางเลือก จัดรูปแบบการป้อนข้อมูลของคุณให้สอดคล้องเพื่อไม่ให้ดูเหมือนreadonlyอินพุต

input[readonly] {
     cursor: text;
     background-color: #fff;
}

ตัวอย่างการทำงาน

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

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

Chrome เคารพการเติมข้อความอัตโนมัติ = ปิดเฉพาะเมื่อมีองค์ประกอบอินพุตอย่างน้อยหนึ่งองค์ประกอบในแบบฟอร์มที่มีค่าการเติมข้อความอัตโนมัติอื่น ๆ

สิ่งนี้จะไม่ทำงานกับฟิลด์รหัสผ่านซึ่งถูกจัดการแตกต่างกันมากใน Chrome ดูhttps://code.google.com/p/chromium/issues/detail?id=468153สำหรับรายละเอียดเพิ่มเติม

UPDATE: Bug ปิดเป็น "จะไม่แก้ไข" โดยทีมงานโครเมี่ยมที่ 11 มีนาคม 2016 ดูความคิดเห็นล่าสุดในรายงานข้อผิดพลาดของฉันยื่นเดิมสำหรับคำอธิบายแบบเต็มรูปแบบ TL; DR: ใช้แอตทริบิวต์การเติมข้อความอัตโนมัติแบบ semantic เช่น autocomplete = "new-street-address-address" เพื่อหลีกเลี่ยงการทำการป้อนอัตโนมัติของ Chrome

สายไปงานเลี้ยงเล็ก ๆ น้อย ๆ แต่ดูเหมือนว่ามีความเข้าใจผิดเกี่ยวกับวิธีการที่autocompleteควรและไม่ควรทำงาน ตามข้อกำหนด HTML ตัวแทนผู้ใช้ (ในกรณีนี้ Chrome) สามารถแทนที่autocomplete:

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

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

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

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

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

ดังนั้นหลังจากประสบความยุ่งยากเช่นเดียวกับคนอื่นฉันพบวิธีแก้ปัญหาที่เหมาะกับฉัน มันคล้ายกันกับautocomplete="false"คำตอบ

บทความ Mozilla พูดถึงปัญหานี้อย่างแน่นอน:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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

ดังนั้นรหัสต่อไปนี้ควรใช้งานได้:

autocomplete="nope"

และควรทำดังนี้:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

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

สิ่งหนึ่งที่ควรกล่าวถึงก็คือเบราว์เซอร์จำนวนมากจะไม่สนใจautocompleteการตั้งค่าสำหรับฟิลด์การเข้าสู่ระบบ (ชื่อผู้ใช้และรหัสผ่าน) ในฐานะที่เป็นบทความ Mozilla ระบุ:

ด้วยเหตุนี้เบราว์เซอร์ที่ทันสมัยจำนวนมากจึงไม่สนับสนุนการเติมข้อความอัตโนมัติ = "ปิด" สำหรับช่องการเข้าสู่ระบบ

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

นี่คือพฤติกรรมใน Firefox (ตั้งแต่รุ่น 38), Google Chrome (ตั้งแต่ 34) และ Internet Explorer (ตั้งแต่รุ่น 11)

ในที่สุดข้อมูลเล็กน้อยว่าแอตทริบิวต์นั้นเป็นของformองค์ประกอบหรือinputองค์ประกอบ สเป็คอีกครั้งมีคำตอบ:

หากไม่ระบุแอตทริบิวต์การเติมข้อความอัตโนมัติค่าเริ่มต้นที่สอดคล้องกับสถานะของแอตทริบิวต์การเติมข้อความอัตโนมัติของเจ้าขององค์ประกอบจะถูกนำมาใช้แทน (ทั้ง "เปิด" หรือ "ปิด") หากไม่มีเจ้าของฟอร์มจะใช้ค่า "เปิด"

ดังนั้น. วางไว้บนแบบฟอร์มควรใช้กับฟิลด์อินพุตทั้งหมด การวางลงในองค์ประกอบแต่ละรายการควรนำไปใช้กับองค์ประกอบนั้น (แม้ว่าจะไม่มีอยู่ในฟอร์ม) หากautocompleteไม่ได้ตั้งค่าเลยจะมีค่าเริ่มต้นเป็นonไม่ได้ตั้งค่าที่ทุกคนเป็นค่าเริ่มต้น

สรุป

หากต้องการปิดการใช้งานautocompleteทั้งรูปแบบ:

<form autocomplete="off" ...>

หรือถ้าคุณจำเป็นต้องทำแบบไดนามิก:

<form autocomplete="random-string" ...>

เมื่อต้องการปิดใช้งานautocompleteในแต่ละองค์ประกอบ (โดยไม่คำนึงถึงการตั้งค่าแบบฟอร์มที่มีอยู่หรือไม่)

<input autocomplete="off" ...>

หรือถ้าคุณจำเป็นต้องทำแบบไดนามิก:

<input autocomplete="random-string" ...>

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

การแก้ปัญหาในปัจจุบันคือการใช้ type="search"วิธีการแก้ปัญหาในปัจจุบันคือการใช้Google ไม่ใช้การป้อนอัตโนมัติกับอินพุตด้วยการค้นหาประเภทหนึ่ง

ดู: https://twitter.com/Paul_Kinlan/status/596613148985171968

อัปเดต 04/04/2016:ดูเหมือนว่าจะได้รับการแก้ไขแล้ว! ดูhttp://codereview.chromium.org/1473733008

Chrome เวอร์ชัน 34 ตอนนี้ไม่สนใจautocomplete=off, เห็นนี้

มีการถกเถียงกันมากมายว่าสิ่งนี้เป็นสิ่งที่ดีหรือไม่ดี? มุมมองของคุณคืออะไร?

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

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

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

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

อัปเดต: 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 (เพียงเดาเนื่องจากการสังเกต) เนื่องจากเบราว์เซอร์เป็นอินสแตนซ์สุดท้ายและคุณไม่สามารถควบคุมได้บางครั้งแม้แต่การเติมข้อความอัตโนมัติ = ปิดจะไม่ป้องกันไม่ให้กรอกข้อมูลประจำตัวในฟิลด์ที่ไม่ถูกต้อง แต่ไม่ใช่ฟิลด์ชื่อผู้ใช้หรือชื่อเล่น

คุณสามารถใช้ได้ autocomplete="new-password"

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

ทำงานใน:

• Chrome: 53, 54, 55
• Firefox: 48, 49, 50

TL; DR:บอก Chrome ว่านี่เป็นอินพุตรหัสผ่านใหม่และจะไม่ให้คำแนะนำเก่าแก่โดยอัตโนมัติ:

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

autocomplete="off" ไม่ทำงานเนื่องจากการตัดสินใจออกแบบ - การวิจัยจำนวนมากแสดงให้เห็นว่าผู้ใช้มีความยาวและยากที่จะแฮ็กรหัสผ่านหากพวกเขาสามารถเก็บไว้ในเบราว์เซอร์หรือผู้จัดการรหัสผ่าน

ข้อมูลจำเพาะสำหรับautocomplete มีการเปลี่ยนแปลงและตอนนี้สนับสนุนค่าต่าง ๆ เพื่อทำให้ฟอร์มการเข้าสู่ระบบง่ายต่อการทำให้สมบูรณ์อัตโนมัติ:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

ถ้าคุณไม่ให้เหล่านี้ Chrome autocomplete="off"ยังคงพยายามที่จะคาดเดาและเมื่อมันไม่ได้ละเว้น

วิธีแก้ไขคือมีautocompleteค่าสำหรับรูปแบบการรีเซ็ตรหัสผ่านด้วย:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

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

Chrome ยังสามารถจัดการรหัสผ่านสำหรับไซต์โดยตรงโดยใช้API หนังสือรับรองซึ่งเป็นมาตรฐานและอาจมีการสนับสนุนสากลในที่สุด

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

<input name="name" type="text" autocomplete="rutjfkde">

หวังว่ามันจะช่วยให้คนอื่น

Autocomplete="Off" ไม่ทำงานอีกต่อไป

ลองใช้เพียงสตริงสุ่มแทน"Off"ตัวอย่างเช่นAutocomplete="NoAutocomplete"

ฉันหวังว่ามันจะช่วย

เห็นโครเมี่ยมเพิกเฉยautocomplete="off"ฉันแก้มันด้วยวิธีที่โง่ซึ่งใช้ "การป้อนข้อมูลปลอม" เพื่อโกงโครเมี่ยมเพื่อเติมแทนการเติม "ของจริง"

ตัวอย่าง:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome จะกรอกข้อมูล "การป้อนข้อมูลปลอม" และเมื่อส่งเซิร์ฟเวอร์จะใช้ค่า "ข้อมูลจริง"

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

ใส่รหัสนี้ในตอนต้นของแบบฟอร์มของคุณ

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

จากนั้นสำหรับฟิลด์รหัสผ่านจริงของคุณให้ใช้

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

แสดงความคิดเห็นคำตอบนี้ถ้ามันไม่ทำงานอีกต่อไปหรือถ้าคุณได้รับปัญหากับเบราว์เซอร์หรือรุ่นอื่น

อนุมัติเมื่อ:

• Chrome: 49
• Firefox: 44, 45
• ขอบ: 25
• Internet Explorer: 11

สำหรับทุกคนที่กำลังมองหาวิธีการแก้ปัญหานี้ในที่สุดฉันก็คิดออก

Chrome ทำตามการเติมข้อความอัตโนมัติ = "ปิด" หากหน้าเป็นหน้า HTML5 (ฉันใช้ XHTML)

ฉันแปลงหน้าเป็น HTML5 และปัญหาหายไป (facepalm)

เปลี่ยนแอตทริบิวต์ประเภทอินพุตเป็น type="search"เปลี่ยนประเภทการป้อนข้อมูลแอตทริบิวต์

Google ไม่ใช้การป้อนอัตโนมัติกับอินพุตด้วยการค้นหาประเภทหนึ่ง

จนถึงเมื่อสัปดาห์ที่แล้วโซลูชั่นทั้งสองด้านล่างดูเหมือนจะใช้งานได้กับ Chrome, IE และ Firefox แต่ด้วยการเปิดตัว Chrome รุ่น 48 (และยังอยู่ใน 49) จึงไม่ทำงานอีกต่อไป:

1. ต่อไปนี้ที่ด้านบนของแบบฟอร์ม:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

2. ต่อไปนี้ในองค์ประกอบการป้อนรหัสผ่าน:

   การเติมข้อความอัตโนมัติ = "ปิด"

ดังนั้นเพื่อแก้ไขปัญหานี้อย่างรวดเร็วในตอนแรกฉันพยายามใช้แฮ็คหลักของการตั้งค่าองค์ประกอบการป้อนรหัสผ่านเป็นครั้งแรกเพื่อปิดใช้งานจากนั้นใช้ setTimeout ในฟังก์ชั่นพร้อมเอกสารเพื่อเปิดใช้งานอีกครั้ง

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

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

นี่คือลิงค์ในการอภิปรายนักพัฒนา Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7

autocomplete=off ส่วนใหญ่จะถูกละเว้นในเบราว์เซอร์ที่ทันสมัย ​​- หลักเนื่องจากผู้จัดการรหัสผ่านเป็นต้น

คุณสามารถลองเพิ่มสิ่งนี้autocomplete="new-password"มันไม่ได้รองรับเบราว์เซอร์ทั้งหมด แต่มันทำงานได้ในบางส่วน

autocomplete="off"มักจะใช้งานได้ แต่ไม่เสมอไป ขึ้นอยู่กับnameฟิลด์อินพุต ชื่อเช่น "ที่อยู่", 'อีเมล', 'ชื่อ' - จะถูกเติมข้อความอัตโนมัติ (เบราว์เซอร์คิดว่าพวกเขาช่วยผู้ใช้) เมื่อฟิลด์เช่น "รหัส", "ขา" - จะไม่ถูกเติมข้อความอัตโนมัติ (หากautocomplete="off"ตั้งไว้)

ปัญหาของฉันคือ - การเติมข้อความอัตโนมัติยุ่งกับตัวช่วยที่อยู่ของ Google

ฉันแก้ไขโดยเปลี่ยนชื่อ

จาก

<input type="text" name="address" autocomplete="off">

ถึง

<input type="text" name="the_address" autocomplete="off">

ทดสอบในโครเมี่ยม 71

แทนการเติมข้อความอัตโนมัติ = "ปิด" ให้ใช้การเติมข้อความอัตโนมัติ = "false" ;)

จาก: https://stackoverflow.com/a/29582380/75799

ไม่มีเงื่อนงำว่าทำไมสิ่งนี้ถึงใช้ได้ในกรณีของฉัน แต่ฉันใช้autocomplete="none"Chrome และ Chrome หยุดการแนะนำที่อยู่สำหรับช่องข้อความของฉัน

ตั้งแต่ Chrome 42 เป็นต้นไปไม่มีวิธีการแก้ไข / แฮ็กในชุดข้อความนี้ (เหมือน2015-05-21T12:50:23+00:00) ที่ปิดการเติมข้อความอัตโนมัติสำหรับแต่ละฟิลด์หรือทั้งฟอร์ม

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

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

ข่าวดีก็คือว่าเนื่องจาก "ลายเซ็นฟอร์ม" เสียหายโดยสิ่งนี้จึงไม่มีการเติมข้อมูลในฟิลด์ให้โดยอัตโนมัติดังนั้นจึงไม่จำเป็นต้องใช้ JS เพื่อล้างข้อมูลฟิลด์ปลอมก่อนส่ง

คำตอบเก่า:

สิ่งเดียวที่ฉันพบว่ายังทำงานได้คือการแทรกเขตข้อมูลจำลองสองประเภทของอีเมลประเภทและรหัสผ่านก่อนฟิลด์จริง คุณสามารถตั้งค่าdisplay: noneให้ซ่อนได้ (ไม่ฉลาดพอที่จะเพิกเฉยกับฟิลด์เหล่านั้น):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

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

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

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

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

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

ตัวอย่างเช่น

<input type="text" placeholder="name or email" autocomplete="off" />

ฉันได้มันมาโดยการเว้นวรรคความกว้างเป็นศูนย์ลงในคำในตัวยึดตำแหน่ง ไม่มีการเติมข้อความอัตโนมัติของ Chrome อีกต่อไป

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

ใน Chrome 48+ ให้ใช้โซลูชันนี้:

1. ใส่ฟิลด์ปลอมไว้ข้างหน้าฟิลด์จริง:

   <form autocomplete="off">
     <input name="fake_email"    class="visually-hidden" type="text">
     <input name="fake_password" class="visually-hidden" type="password">
   
     <input autocomplete="off" name="email"    type="text">
     <input autocomplete="off" name="password" type="password">
   </form>

2. ซ่อนเขตข้อมูลปลอม:

   .visually-hidden {
     margin: -1px;
     padding: 0;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }

3. คุณทำมัน!

นอกจากนี้ยังใช้งานได้กับรุ่นเก่ากว่า

หลังจาก chrome v. 34 การตั้งค่าautocomplete="off"ที่<form>แท็กไม่ทำงาน

ฉันทำการเปลี่ยนแปลงเพื่อหลีกเลี่ยงพฤติกรรมที่น่ารำคาญนี้:

1. ลบ the nameและidของการป้อนรหัสผ่าน
2. ใส่ชั้นเรียนในการป้อนข้อมูล (อดีต .: passwordInput)

(จนถึงตอนนี้ Chrome จะไม่ใส่รหัสผ่านที่บันทึกไว้ในอินพุต แต่ตอนนี้แบบฟอร์มเสีย)

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

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

ในกรณีของฉันฉันเคย hav id="password" name="password"ในการป้อนรหัสผ่านดังนั้นฉันจึงนำพวกเขากลับมาก่อนที่จะเรียกการส่ง

หลังจากลองใช้โซลูชันทั้งหมดแล้วนี่คือสิ่งที่ดูเหมือนว่าจะใช้งานได้สำหรับรุ่น chrome: 45 โดยมีฟอร์มที่มีฟิลด์รหัสผ่าน:

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

ฉันเพิ่งอัปเดตเป็นChrome 49และโซลูชันของ Diogo Cidไม่ทำงานอีกต่อไป

ฉันทำการหลีกเลี่ยงวิธีอื่นในการซ่อนและลบเขตข้อมูลในเวลาทำการหลังจากโหลดหน้าเว็บแล้ว

ตอนนี้ Chrome ไม่สนใจวิธีแก้ปัญหาดั้งเดิมโดยใช้ข้อมูลรับรองในฟิลด์ที่แสดง เป็นครั้งแรกtype="password"และtype="text"ฟิลด์ก่อนหน้าดังนั้นฉันจึงซ่อนทั้งสองฟิลด์โดยใช้CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

ฉันรู้ว่ามันอาจจะดูไม่สวยงาม แต่มันใช้งานได้ดี

ฉันพบว่าวิธีนี้เหมาะสมที่สุด:

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

มันจะต้องโหลดหลังจากโดมพร้อมหรือหลังการแสดงผลแบบฟอร์ม

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

Chrome ละเว้นการเติมข้อความอัตโนมัติอย่างสมบูรณ์ = "ปิด" ทันที ในขณะที่แฮ็ค JS ทำงานได้ดีฉันพบวิธีง่าย ๆ ที่ใช้งานได้ในขณะที่เขียน:

ตั้งค่าของฟิลด์รหัสผ่านเป็นอักขระควบคุม 8 ( "\x08"ใน PHP หรือใน HTML) สิ่งนี้จะหยุด Chrome เติมฟิลด์โดยอัตโนมัติเนื่องจากมีค่า แต่ไม่มีการป้อนค่าจริงเนื่องจากนี่เป็นอักขระ Backspace

ใช่มันยังคงเป็นแฮ็ก แต่ใช้ได้สำหรับฉัน YMMV