มีวิธีที่ถูกต้อง W3C ในการปิดใช้งานการเติมข้อความอัตโนมัติในรูปแบบ HTML หรือไม่?

424

เมื่อใช้xhtml1-transitional.dtddoctype ให้รวบรวมหมายเลขบัตรเครดิตด้วย HTML ต่อไปนี้

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

จะตั้งค่าสถานะคำเตือนในเครื่องมือตรวจสอบ W3C:

ไม่มีแอตทริบิวต์ "เติมข้อความอัตโนมัติ"

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

— ข
แหล่งที่มา

10

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

— rmeador

113

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

— ด้านข

13

กรณีการใช้งานของฉันแตกต่างกันเล็กน้อย - ฉันกำลังเติมข้อความอัตโนมัติของฉันเองและฉันไม่ต้องการให้มันขัดแย้งกับเบราว์เซอร์ ฉันเพิ่งค้นพบว่าการเติมข้อความอัตโนมัติ = "ปิด" ไม่ถูกต้อง แต่ดูเหมือนว่าจะไม่มีวิธีแก้ปัญหาอื่น ๆ ง่าย ๆ (การฉีดด้วย js เป็นเพียงเรื่องเหลวไหล)

— thepeer

13

@rmeador เพราะบางครั้งเราต้องการให้ทางเลือกที่เป็นมิตรกับผู้ใช้มากขึ้นในกล่องแนะนำอัตโนมัติมาตรฐาน @corydoras โปรดอย่าผลักน้ำหนัก OSX ของคุณไปรอบ ๆ มันไม่เป็นประโยชน์ต่อการแก้ปัญหาของคำถามนี้

— Josh M.

12

ปัญหาคือธนาคารจะต้องรับผิดชอบต่อผู้ค้าหากมีการทำธุรกรรมที่ฉ้อโกงเกิดขึ้น ... แม้ว่าจะเป็นความผิดของลูกค้าที่ 100% ดังนั้นในบางสถานการณ์จึงเป็นเรื่องถูกต้องที่จะปิดการใช้งานคุณลักษณะสำหรับลูกค้า

— Alexandre H. Tremblay

421

ที่นี่คือบทความที่ดีจาก MDC ซึ่งอธิบายถึงปัญหา (และวิธีแก้ไข) เพื่อสร้างการเติมข้อความอัตโนมัติ Microsoft ได้เผยแพร่สิ่งที่คล้ายกันที่นี่เช่นกัน

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

หากคุณต้องการลบคำเตือนทั้งหมดคุณสามารถใช้ JavaScript เพื่อใช้คุณสมบัติกับเบราว์เซอร์ที่รองรับ (IE และ Firefox เป็นเบราว์เซอร์ที่สำคัญ) โดยใช้ someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

สุดท้ายหากเว็บไซต์ของคุณใช้ HTTPS IE จะปิดการเติมข้อความอัตโนมัติโดยอัตโนมัติ (เช่นเดียวกับเบราว์เซอร์อื่น ๆ เท่าที่ฉันรู้)

ปรับปรุง

เนื่องจากคำตอบนี้ยังมี upvote อยู่ค่อนข้างน้อยฉันแค่ต้องการชี้ให้เห็นว่าใน HTML5 คุณสามารถใช้แอตทริบิวต์ 'เติมข้อความอัตโนมัติ' ในองค์ประกอบแบบฟอร์มของคุณ ดูเอกสารประกอบบน W3C

— Nick Presta
แหล่งที่มา

41

ดูเหมือนว่า Firefox จะไม่ปิดการเติมข้อความอัตโนมัติใน https แต่นั่นเป็นความรู้ที่มีประโยชน์ ขอบคุณ!

— ด้านข

3

Safari ไม่เคารพแอตทริบิวต์ autocomplete = "off" ดูstackoverflow.com/questions/22817801/…

— Skurpi

1

autocompleteอาจนำไปใช้ไม่เพียง แต่ในformองค์ประกอบและoffค่าทำงานอย่างน้อยในchromium-40.0.2214.115

— x-yuri

ดูเหมือนว่า w3c จะขยายมาตรฐานสำหรับการเติมข้อความอัตโนมัติใน HTML5.1 (ในฉบับร่างตามความคิดเห็นนี้) w3c.github.io/html/…

— Justin Nafe

1

หากไม่มีอะไรทำงานให้ใช้ textarea แทน textbox เพื่อปิดการเติมข้อความอัตโนมัติ

— Bsienn

64

ฉันจะแปลกใจมากถ้า W3C เสนอวิธีที่จะทำงานกับ (X) HTML4 คุณลักษณะการเติมข้อความอัตโนมัตินั้นใช้เบราว์เซอร์ทั้งหมดและได้รับการแนะนำในช่วงปีที่ผ่านมา (หลังจากเขียนมาตรฐาน HTML4)

จะไม่แปลกใจหาก HTML5 จะมีอย่างใดอย่างหนึ่ง

แก้ไข:ในฐานะที่ผมคิดว่าHTML5 ไม่ได้มีคุณลักษณะ ในการกำหนดหน้าเว็บของคุณเป็น HTML5 ให้ใช้ doctype ต่อไปนี้ (เช่น: ใส่ข้อความนี้เป็นข้อความแรกในซอร์สโค้ดของคุณ) โปรดทราบว่าเบราว์เซอร์บางรุ่นอาจไม่สนับสนุนมาตรฐานนี้

<!DOCTYPE html>

— Henrik Paul
แหล่งที่มา

7

เบราว์เซอร์ทั้งหมดคาดว่า Konqueror เวอร์ชันเก่าจะรองรับ แม้แต่ IE6 ก็รองรับมัน มันเป็นสิ่งที่ต้องทำ

— BalusC

56

HTML 4 : ไม่

HTML 5 : ใช่

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

อ้างอิง: W3

— RuudKok
แหล่งที่มา

@ freestock.tk ใช่มันชัดเจนกว่าคนอื่น ๆ ทั้งหมด เรื่องของความเรียบง่าย

— OverCoder

32

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

หากคุณต้องการให้ชื่ออินพุต "ฟิลด์email_<?= randomNumber() ?>" จากนั้นให้สคริปต์ที่รับลูปข้อมูลนี้ผ่านตัวแปร POST หรือ GET เพื่อค้นหาสิ่งที่ตรงกับรูปแบบ " email_[some number]" คุณสามารถดึงสิ่งนี้ออกและสิ่งนี้จะมี ( จริง) รับประกันความสำเร็จโดยไม่คำนึงถึงเบราว์เซอร์

— Phantom Watson
แหล่งที่มา

6

สิ่งนี้จะทำให้การทดสอบอัตโนมัติยากขึ้น

— David Waters

14

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

— corydoras

8

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

— Joey Adams

2

สันนิษฐานว่า แต่จะไม่ถูกคาดหวังให้ปรากฏต่อผู้ใช้อีกครั้ง

— Phantom Watson

1

ตอนนี้ Chrome ใช้แอตทริบิวต์ type = "password" แทนแอตทริบิวต์ name สำหรับไซต์ใดไซต์หนึ่ง ฉันมี name = "newpassword" autocomplete = 'off' type = "รหัสผ่าน" และมันได้รับการป้อนอัตโนมัติ! หากฉันเปลี่ยนประเภทไม่มีการป้อนอัตโนมัติ

— Enigma Plus

31

ไม่มีบทความที่ดีอยู่ที่นี่ในMozila วิกิพีเดีย

ฉันจะใช้สิ่งที่ไม่ถูกต้องattributeต่อไป ฉันคิดว่านี่คือที่นิยมปฏิบัติควรชนะการตรวจสอบ

— เดวิดวอเตอร์
แหล่งที่มา

23

วิธีการเกี่ยวกับการตั้งค่าด้วย JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

มันไม่สมบูรณ์แบบ แต่ HTML ของคุณจะถูกต้อง

— เกร็ก
แหล่งที่มา

8

การใช้ javascript เป็นวิธีแก้ปัญหาเพื่อตรวจสอบความผิดพลาดนั้นเหมือนกับการกวาดฝุ่นใต้พรม ในขณะที่เอกสาร HTML อาจใช้ได้หน้า HTML + JS ที่ได้จะไม่เป็นเช่นนั้น

— Fregante

19

ฉันขอแนะนำให้จับอินพุตทั้ง 4 ประเภท:

$('form,input,select,textarea').attr("autocomplete", "off");

อ้างอิง:

— Malartre
แหล่งที่มา

3

สามารถใช้ได้:inputเช่นกัน

— Ascherer

11

หากคุณใช้ jQuery คุณสามารถทำสิ่งต่อไปนี้:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

และใช้คลาส autocompleteOff ที่คุณต้องการ:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

หากคุณต้องการให้ข้อมูลทั้งหมดของคุณเป็นautocomplete=offจริงคุณสามารถใช้สิ่งต่อไปนี้:

$(document).ready(function(){$("input").attr("autocomplete","off");});

— Totoche
แหล่งที่มา

4

เพียงแค่ใช้ Doctype HTML5 นั้นง่ายและดีกว่า

— BalusC

5

นี่มันไม่ถูกต้อง html จริง ๆ แล้วมันเป็นเพียงการตั้งค่าautocompleteแอตทริบิวต์(ไม่ถูกต้อง) ในวิธีอื่นนอกเหนือจากใน html

— ด้าน b

รหัสนี้ใช้ไม่ได้สำหรับฉัน ฉันเคยใช้$('input.autocompleteOff').val('');ซึ่งดูเหมือนว่าจะตกลง

— dqd

5

การใช้ javascript เป็นวิธีแก้ปัญหาเพื่อตรวจสอบความผิดพลาดนั้นเหมือนกับการกวาดฝุ่นใต้พรม ในขณะที่เอกสาร HTML อาจใช้ได้หน้า HTML + JS ที่ได้จะไม่เป็นเช่นนั้น

— fregante

8

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

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

สิ่งนี้ใช้งานได้สำหรับความต้องการของเรา แต่จากนั้นเรามีความหรูหราในการบอกผู้ใช้ให้รับเบราว์เซอร์ที่มีประสิทธิภาพ :)

autocomplete='off'

— Enigma Plus
แหล่งที่มา

8

autocomplete="off" สิ่งนี้ควรแก้ไขปัญหาสำหรับเบราว์เซอร์ที่ทันสมัยทั้งหมด

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

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

ปรับปรุง

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

autocomplete="nope"

เนื่องจากค่าสุ่มนี้ไม่ใช่ a valid oneเบราว์เซอร์จะยอมแพ้

Documetation

— Emilio Gort
แหล่งที่มา

เบราว์เซอร์สมัยใหม่ไม่เคารพการเติมข้อความอัตโนมัติ = ปิดโดยตัวเลือก :/ น่าเสียดาย.

— Alexus

@Alexus เพิ่มการอัปเดตบางอย่าง ... อินเทอร์เน็ตเปลี่ยนเร็วมาก

— Emilio Gort

6

การใช้คุณลักษณะ 'ชื่อ' แบบสุ่มเหมาะกับฉัน

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

— opznhaarlems
แหล่งที่มา

5

โปรดทราบว่ามีความสับสนเกี่ยวกับตำแหน่งของแอตทริบิวต์การเติมข้อความอัตโนมัติ สามารถนำไปใช้กับแท็ก FORM ทั้งหมดหรือกับแท็ก INPUT แต่ละแท็กและสิ่งนี้ไม่ได้มาตรฐานจริงๆก่อน HTML5 (ที่อนุญาตทั้งสอง ตำแหน่งอย่างชัดเจน) เอกสารเก่ากว่าโดยเฉพาะอย่างยิ่งบทความ Mozilla นี้กล่าวถึงเพียงแท็ก FORM ในขณะเดียวกันสแกนเนอร์รักษาความปลอดภัยบางรายจะมองหาการเติมข้อความอัตโนมัติในแท็ก INPUT และบ่นว่าหายไป (แม้ว่าจะอยู่ในรูปแบบหลัก) การวิเคราะห์รายละเอียดของระเบียบนี้ถูกโพสต์ที่นี่: ความสับสนมากกว่าการเติมข้อความอัตโนมัติ = OFF แอตทริบิวต์ในรูปแบบ

— kravietz
แหล่งที่มา

3

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

ไม่แน่ใจว่าจะใช้งานได้หรือไม่เป็นเพียงความคิด

— คีรอน
แหล่งที่มา

2

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

ฉันอาจจะผิด แต่มันเป็นเพียงความคิด

— งูและกาแฟ
แหล่งที่มา

2

if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}

— แจ็คทัก
แหล่งที่มา

-1

วิธีนี้ใช้ได้กับฉัน:

$('form,input,select,textarea').attr("autocomplete", "nope");

หากคุณต้องการใช้ป้อนอัตโนมัติในพื้นที่นี้: เพิ่มautocomplete="false"องค์ประกอบก่อน:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

— ภาคใต้ของ
แหล่งที่มา

-5

ปิดการเติมข้อความอัตโนมัติที่ถูกต้อง

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>

— ออกแบบเว็บไซต์ Southampton
แหล่งที่มา

13

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

— Terry_Brown

3

นี่ไม่ใช่เรื่องตลก

— Ricardo Pieper