เป็นไปได้หรือไม่ที่จะใช้ CSS เพื่อปิดใช้งานการเติมข้อความอัตโนมัติในองค์ประกอบแบบฟอร์ม (โดยเฉพาะฟิลด์ข้อความ)
ฉันใช้ไลบรารีแท็กซึ่งไม่อนุญาตให้ใช้องค์ประกอบเติมข้อความอัตโนมัติและฉันต้องการปิดใช้งานการเติมข้อความอัตโนมัติโดยไม่ใช้ Javascript
เป็นไปได้หรือไม่ที่จะใช้ CSS เพื่อปิดใช้งานการเติมข้อความอัตโนมัติในองค์ประกอบแบบฟอร์ม (โดยเฉพาะฟิลด์ข้อความ)
ฉันใช้ไลบรารีแท็กซึ่งไม่อนุญาตให้ใช้องค์ประกอบเติมข้อความอัตโนมัติและฉันต้องการปิดใช้งานการเติมข้อความอัตโนมัติโดยไม่ใช้ Javascript
คำตอบ:
คุณสามารถใช้ค่าที่สร้างขึ้นid
และname
ทุกครั้งซึ่งแตกต่างกันดังนั้นเบราว์เซอร์จึงจำช่องข้อความนี้ไม่ได้และจะไม่แนะนำค่าบางอย่าง
นี่เป็นทางเลือกที่ปลอดภัยสำหรับเบราว์เซอร์อย่างน้อย แต่ฉันอยากแนะนำให้ไปพร้อมกับคำตอบจาก RobertsonM ( autocomplete="off"
)
autocomplete="off"
นี้จะถูกละเว้นในเวอร์ชัน Browser X (ปัจจุบัน + 1) (ตัวอย่างเช่น Google Chrome ล่าสุดละเว้นการเติมข้อความอัตโนมัติ = ปิด)
id
แต่ก็ยังบันทึกไว้ในแคช (เช่นในฮาร์ดไดรฟ์ของผู้ใช้) ซึ่งเป็นสิ่งที่น่ากลัวสำหรับหมายเลขบัตรเครดิตของใครบางคนหรือข้อมูลที่ละเอียดอ่อนอื่น ๆ นอกจากนี้ยังรวมกลุ่มดิสก์ไดรฟ์ของผู้ใช้โดยไม่จำเป็น ทุกครั้งที่เข้าชมเพจของคุณไฟล์ใหม่ (คล้ายคุกกี้) จะถูกบันทึกไว้ในคอมพิวเตอร์ เพียงแค่พยายามล้างแคช Chrome ของคุณและดูว่าจะมีพื้นที่ว่างเท่าใด (หากคุณไม่ได้ทำมาระยะหนึ่งแล้ว) นั่นเป็นเหตุผลที่ฉันเรียกมันว่าเป็นความคิดที่แย่มาก
ตามที่กล่าวมาไม่มีแอตทริบิวต์ "ปิดการเติมข้อความอัตโนมัติ" ใน CSS อย่างไรก็ตาม html มีรหัสง่ายๆสำหรับสิ่งนี้:
<input type="text" id="foo" value="bar" autocomplete="off" />
หากคุณกำลังมองหาเอฟเฟกต์ทั่วทั้งไซต์วิธีง่ายๆก็คือมีฟังก์ชัน js เพื่อเรียกใช้ 'อินพุต' ทั้งหมดและเพิ่มแท็กนี้หรือมองหาคลาส / id css ที่เกี่ยวข้อง
แอตทริบิวต์การเติมข้อความอัตโนมัติทำงานได้ดีใน Chrome และ Firefox (!) แต่โปรดดูที่ W3C มีวิธีที่ถูกต้องในการปิดใช้งานการเติมข้อความอัตโนมัติในรูปแบบ HTML หรือไม่
autocomplete="anyrandominvalidvalue"
ก็ใช้ได้
คุณสามารถใช้ jQuery ได้อย่างง่ายดาย
$('input').attr('autocomplete','off');
form
เป็นสิ่งเดียวที่ใช้ได้ผล input
ไม่ ขอบคุณ.
หากคุณใช้ a form
คุณสามารถปิดใช้งานการเติมข้อความอัตโนมัติทั้งหมดด้วย
<form id="Form1" runat="server" autocomplete="off">
CSS ไม่มีความสามารถนี้ คุณจะต้องใช้การเขียนสคริปต์ฝั่งไคลเอ็นต์
autocomplete="false"
จะทำงานใน Edge ในทางเทคนิคค่าที่ไม่ถูกต้องสามารถแทนที่ "เท็จ" ได้ที่นี่
ฉันลองใช้วิธีที่แนะนำทั้งหมดจากคำตอบของคำถามนี้และบทความอื่น ๆ ในเว็บ แต่ก็ไม่ได้ผล ฉันลองเติมข้อความอัตโนมัติ = "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 เป็นพิเศษและหวังว่าสิ่งนี้จะยังคงทำงานและช่วยเหลือผู้อื่นได้
ฉันแก้ปัญหาด้วยการเพิ่มชื่อเติมข้อความอัตโนมัติปลอมสำหรับอินพุตทั้งหมด
$("input").attr("autocomplete", "fake-name-disable-autofill");
มี 3 วิธีที่ฉันพูดถึงเพื่อให้เป็นวิธีที่ดีกว่า ...
วิธี 1-HTML:
<input type="text" autocomplete="false" />
2-Javascript วิธี:
document.getElementById("input-id").getAttribute("autocomplete") = "off";
วิธี 3-jQuery:
$('input').attr('autocomplete','off');
ขอบคุณโซลูชันของ @ 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
หากคุณพบวิธีแก้ปัญหาที่ดีกว่าโปรดแจ้งให้เราทราบ
คุณไม่สามารถใช้ CSS เพื่อปิดใช้งานการเติมข้อความอัตโนมัติ แต่คุณสามารถใช้ HTML:
<input type="text" autocomplete="false" />
ในทางเทคนิคคุณสามารถแทนที่false
ด้วยค่าที่ไม่ถูกต้องและใช้งานได้ iOS นี้เป็นโซลูชันเดียวที่ฉันพบซึ่งใช้ได้กับ Edge
ฉันแค่ใช้'new-password'
แทนการ'off'
เติมข้อความอัตโนมัติ
และฉันได้ลองใช้รหัสนี้แล้วและใช้งานได้ (อย่างน้อยก็ในตอนท้าย) ฉันใช้ WP และ GravityForm สำหรับข้อมูลของคุณ
$('input').attr('autocomplete','new-password');
$('input').attr('autocomplete','off');