ปิดใช้งานการเติมข้อความอัตโนมัติผ่าน CSS


94

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

ฉันใช้ไลบรารีแท็กซึ่งไม่อนุญาตให้ใช้องค์ประกอบเติมข้อความอัตโนมัติและฉันต้องการปิดใช้งานการเติมข้อความอัตโนมัติโดยไม่ใช้ Javascript

คำตอบ:


52

คุณสามารถใช้ค่าที่สร้างขึ้นidและnameทุกครั้งซึ่งแตกต่างกันดังนั้นเบราว์เซอร์จึงจำช่องข้อความนี้ไม่ได้และจะไม่แนะนำค่าบางอย่าง

นี่เป็นทางเลือกที่ปลอดภัยสำหรับเบราว์เซอร์อย่างน้อย แต่ฉันอยากแนะนำให้ไปพร้อมกับคำตอบจาก RobertsonM ( autocomplete="off")


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

4
เป็นความคิดที่ดี แต่ไม่ได้ป้องกันไม่ให้บันทึกหมายเลขบัตรเครดิตลงในฐานข้อมูลการเติมข้อความอัตโนมัติที่ไม่ได้เข้ารหัส
Hans-Peter Störr

หากคุณไม่ได้ใช้ชื่อ / รหัสควบคุมแบบคงที่สคริปต์ใด ๆ ก็จะเสียและการรวบรวมข้อมูลในรูปแบบใด ๆ ก็จะพังไปด้วย (เว้นแต่ทุกแง่มุมของแอปพลิเคชันของคุณจะทราบถึงหลักการตั้งชื่อใหม่และมีการอัปเดตสคริปต์ / การรวบรวมข้อมูลแบบไดนามิก ).
Gary Richter

ฉันต้องหลีกเลี่ยงการเติมข้อความอัตโนมัติการ "สุ่ม" ชื่อฟิลด์เป็นวิธีเดียวที่จะไปได้จริง การใช้คำใบ้เช่นautocomplete="off"นี้จะถูกละเว้นในเวอร์ชัน Browser X (ปัจจุบัน + 1) (ตัวอย่างเช่น Google Chrome ล่าสุดละเว้นการเติมข้อความอัตโนมัติ = ปิด)
Mikko Rantalainen

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

129

ตามที่กล่าวมาไม่มีแอตทริบิวต์ "ปิดการเติมข้อความอัตโนมัติ" ใน CSS อย่างไรก็ตาม html มีรหัสง่ายๆสำหรับสิ่งนี้:

<input type="text" id="foo" value="bar" autocomplete="off" />

หากคุณกำลังมองหาเอฟเฟกต์ทั่วทั้งไซต์วิธีง่ายๆก็คือมีฟังก์ชัน js เพื่อเรียกใช้ 'อินพุต' ทั้งหมดและเพิ่มแท็กนี้หรือมองหาคลาส / id css ที่เกี่ยวข้อง

แอตทริบิวต์การเติมข้อความอัตโนมัติทำงานได้ดีใน Chrome และ Firefox (!) แต่โปรดดูที่ W3C มีวิธีที่ถูกต้องในการปิดใช้งานการเติมข้อความอัตโนมัติในรูปแบบ HTML หรือไม่


4
developer.mozilla.org/en-US/docs/Web/Security/…แนะนำautocomplete="anyrandominvalidvalue"ก็ใช้ได้
Andrew Stalker

49

คุณสามารถใช้ jQuery ได้อย่างง่ายดาย

$('input').attr('autocomplete','off');

4
ในกรณีส่วนใหญ่ $ ('form'). attr ('autocomplete', 'off'); มีประสิทธิภาพมากขึ้น (ดูความคิดเห็นของคำตอบด้านล่าง)
irakli

@irakli ในกรณีของฉันการใช้formเป็นสิ่งเดียวที่ใช้ได้ผล inputไม่ ขอบคุณ.
khaverim

1
สวัสดีปี 2018 และนี่เป็นเพียงวิธีเดียวที่ฉันจะทำให้มันใช้งานได้ในทุกวันนี้ นอกจากนี้ @irakli สิ่งนี้เป็นจริงหากคุณจำเป็นต้องใช้แบบฟอร์มทั้งหมดโดยเราเป็นตัวเลือก
Devon Kiss

15

หากคุณใช้ a formคุณสามารถปิดใช้งานการเติมข้อความอัตโนมัติทั้งหมดด้วย

<form id="Form1" runat="server" autocomplete="off">

ต่อ Mozilla: "หากไม่ได้ระบุแอตทริบิวต์การเติมข้อความอัตโนมัติในองค์ประกอบอินพุตเบราว์เซอร์จะใช้ค่าแอตทริบิวต์การเติมข้อความอัตโนมัติของเจ้าของฟอร์มขององค์ประกอบ <input> เจ้าของแบบฟอร์มเป็นองค์ประกอบฟอร์มที่องค์ประกอบ <input> นี้คือ ลูกหลานของหรือองค์ประกอบรูปแบบที่ ID ถูกระบุโดยแอตทริบิวต์ form ขององค์ประกอบอินพุตสำหรับข้อมูลเพิ่มเติมโปรดดูแอตทริบิวต์การเติมข้อความอัตโนมัติใน <form> " การพิจารณาสิ่งนี้เป็นทางเลือกที่มีประสิทธิภาพมากกว่า jQuery จากที่แสดงไว้ด้านบนจะเป็น: $ ('form'). attr ('autocomplete', 'off');
irakli

13

CSS ไม่มีความสามารถนี้ คุณจะต้องใช้การเขียนสคริปต์ฝั่งไคลเอ็นต์


1
มีความคิดอย่างไรที่จะปิดใช้งานสิ่งนี้ใน edge? ไม่ว่าเราจะมองเห็นอะไรก็ตาม
Benjamin Gruenbaum

@BenjaminGruenbaum การใช้autocomplete="false"จะทำงานใน Edge ในทางเทคนิคค่าที่ไม่ถูกต้องสามารถแทนที่ "เท็จ" ได้ที่นี่
Andrew

4

ฉันลองใช้วิธีที่แนะนำทั้งหมดจากคำตอบของคำถามนี้และบทความอื่น ๆ ในเว็บ แต่ก็ไม่ได้ผล ฉันลองเติมข้อความอัตโนมัติ = "new-random-value", autocomplete = "off" ในองค์ประกอบของฟอร์มโดยใช้สคริปต์ฝั่งไคลเอ็นต์ดังต่อไปนี้ แต่อยู่นอก $ (document) .ready () ตามที่ผู้ใช้รายหนึ่งกล่าวถึง:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

ฉันพบว่าอาจมีลำดับความสำคัญอื่นในเบราว์เซอร์ทำให้เกิดพฤติกรรมแปลก ๆ นี้! ดังนั้นฉันจึงค้นหามากขึ้นและในที่สุดฉันก็อ่านอีกครั้งด้านล่างบรรทัดจากบทความที่ดีนี้ :

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

หากไซต์ตั้งค่าการเติมข้อความอัตโนมัติ = "ปิด" สำหรับ a และแบบฟอร์มมีช่องป้อนชื่อผู้ใช้และรหัสผ่านเบราว์เซอร์จะยังคงจำการเข้าสู่ระบบนี้และหากผู้ใช้ยินยอมเบราว์เซอร์จะป้อนข้อมูลในช่องเหล่านั้นโดยอัตโนมัติในครั้งถัดไปที่ผู้ใช้ เยี่ยมชมหน้า หากไซต์ตั้งค่าการเติมข้อความอัตโนมัติ = "ปิด" สำหรับช่องชื่อผู้ใช้และรหัสผ่านเบราว์เซอร์จะยังคงเสนอให้จดจำการเข้าสู่ระบบนี้และหากผู้ใช้ยินยอมเบราว์เซอร์จะป้อนข้อมูลในช่องเหล่านั้นโดยอัตโนมัติในครั้งถัดไปที่ผู้ใช้เข้าชมหน้า นี่คือลักษณะการทำงานใน Firefox (ตั้งแต่เวอร์ชัน 38), Google Chrome (ตั้งแต่ปี 34) และ Internet Explorer (ตั้งแต่เวอร์ชัน 11)

หากคุณกำลังกำหนดหน้าการจัดการผู้ใช้ที่ผู้ใช้สามารถระบุรหัสผ่านใหม่ให้กับบุคคลอื่นได้ดังนั้นคุณจึงต้องการป้องกันการกรอกรหัสผ่านโดยอัตโนมัติคุณสามารถใช้การ เติมข้อความอัตโนมัติ = "new-password" ; อย่างไรก็ตามยังไม่มีการนำการสนับสนุนค่านี้มาใช้ใน Firefox

มันใช้งานได้ ฉันพยายามใช้ Chrome เป็นพิเศษและหวังว่าสิ่งนี้จะยังคงทำงานและช่วยเหลือผู้อื่นได้


1

ฉันแก้ปัญหาด้วยการเพิ่มชื่อเติมข้อความอัตโนมัติปลอมสำหรับอินพุตทั้งหมด

$("input").attr("autocomplete", "fake-name-disable-autofill");

1

มี 3 วิธีที่ฉันพูดถึงเพื่อให้เป็นวิธีที่ดีกว่า ...

วิธี 1-HTML:

<input type="text" autocomplete="false" />

2-Javascript วิธี:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

วิธี 3-jQuery:

$('input').attr('autocomplete','off');

0

ขอบคุณโซลูชันของ @ ahhmarrฉันสามารถแก้ปัญหาเดียวกันในสภาพแวดล้อมAngular + ui-router ของฉันซึ่งฉันจะแบ่งปันที่นี่สำหรับใครก็ตามที่สนใจ

ในของindex.htmlฉันฉันได้เพิ่มสคริปต์ต่อไปนี้:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

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

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

หมดเวลาสำหรับ html ในการแสดงผลก่อนใช้ jquery

หากคุณพบวิธีแก้ปัญหาที่ดีกว่าโปรดแจ้งให้เราทราบ


0

คุณไม่สามารถใช้ CSS เพื่อปิดใช้งานการเติมข้อความอัตโนมัติ แต่คุณสามารถใช้ HTML:

<input type="text" autocomplete="false" />

ในทางเทคนิคคุณสามารถแทนที่falseด้วยค่าที่ไม่ถูกต้องและใช้งานได้ iOS นี้เป็นโซลูชันเดียวที่ฉันพบซึ่งใช้ได้กับ Edge


0

ฉันแค่ใช้'new-password'แทนการ'off'เติมข้อความอัตโนมัติ

และฉันได้ลองใช้รหัสนี้แล้วและใช้งานได้ (อย่างน้อยก็ในตอนท้าย) ฉันใช้ WP และ GravityForm สำหรับข้อมูลของคุณ

$('input').attr('autocomplete','new-password');

-5
$('input').attr('autocomplete','off');

3
สิ่งนี้ไม่ได้ให้คำตอบสำหรับคำถามที่ถาม OP ถามหาโซลูชัน CSS โดยเฉพาะนอกจากนี้ยังเป็นคำตอบเดียวกับที่มีอยู่แล้ว
Holger เพียง
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.