好的，所以...像許多其他帖子一樣，這讓我發瘋了。Chrome 會不斷為我不希望使用的欄位提供自動完成建議。它與軟鍵盤一起占據了整個頁面，從而阻止了用戶的視圖/表單不是為了填充我們的用戶資料，而是一個以前未知的新地址。
到目前為止，我已經把這兩個都裝上了
<form autocomplete="off">
和
<input autocomplete="randomstringxxx">
它們的效果很明顯，chrome 不再填充整個表單 - 但它仍然想為我表單中的每個元素建議單個欄位建議。
我終于意識到它現在從我的表單元素中獲取 id/name 欄位。
即下面會給我一個我以前用過的名字的串列。
<input id="contact_name" name="contact_name">
誰能建議一種在不重命名元素的情況下阻止這種情況的方法？它們與我的資料庫中的欄位相關聯，理想情況下我不必手動重命名并將它們匹配在一起。
例子 -
uj5u.com熱心網友回復：
我知道這并不理想，因為它會更改輸入的名稱，但它只是暫時的。更改名稱屬性是我發現完全洗掉自動完成的唯一方法。
該解決方案全部采用 JS 和 HTML，但我認為如果使用 PHP 或 Java 等服務器端語言實作會更好。
我發現autocomplete="none"最適合 chrome，但它并沒有完全關閉自動完成功能。
這個怎么運作
因此，在頁面加載時，此解決方案會為每個輸入名稱添加一串隨機字符。
eg. 'delivery_contact_name' becomes 'delivery_contact_nameI5NTE'
提交表單時，它會呼叫一個函式 (submission())，該函式會洗掉添加的隨機字符。所以提交的表單資料將具有原始名稱。
請參閱下面的解決方案：
<html>
<body>
<form autocomplete="none" id="account_form" method="post" action="" onsubmit="return submission();">
<div class="my-2">
<label for="delivery_contact_name" class="">*</label>
<input autocomplete="none" class="form-control" id="delivery_contact_name" maxlength="200" minlength="2" name="delivery_contact_name" required="" type="text" value="">
</div>
<div class="my-2">
<label for="delivery_telephone" class="">Telephone*</label>
<input autocomplete="none" class="form-control" id="delivery_telephone" maxlength="200" minlength="8" name="delivery_telephone" required="" type="tel" value="">
</div>
<div class="my-2">
<label for="delivery_address_1" class="">Delivery Address*</label>
<input autocomplete="none" class="form-control" id="delivery_address_1" maxlength="50" minlength="2" name="delivery_address_1" required="" type="text" value="">
</div>
<div class="my-2">
<label for="delivery_address_2" class="">Delivery Address*</label>
<input autocomplete="none" class="form-control" id="delivery_address_2" maxlength="50" minlength="2" name="delivery_address_2" required="" type="text" value="">
</div>
<div class="my-2">
<label for="delivery_address_3" class="">Delivery Address</label>
<input autocomplete="none" class="form-control" id="delivery_address_3" name="delivery_address_3" type="text" value="">
</div>
<div class="my-2">
<label for="delivery_address_4" class="">Delivery Address</label>
<input autocomplete="none" class="form-control" id="delivery_address_4" name="delivery_address_4" type="text" value="">
</div>
<div class="my-2">
<label for="delivery_address_postcode" class="">Delivery Postcode*</label>
<input autocomplete="none" class="form-control" id="delivery_address_postcode" maxlength="10" minlength="6" name="delivery_address_postcode" required="" type="text" value="">
</div>
<input type="submit" name="submit" value="Send">
</form>
</body>
<script>
//generate a random string to append to the names
const autocompleteString = btoa(Math.random().toString()).substr(10, 5);
//get all the inputs in the form
const inputs = document.querySelectorAll("input");
//make sure script calls function after page load
document.addEventListener("DOMContentLoaded", function(){
changeInputNames();
});
//add random characters to input names
function changeInputNames(){
for (var i = 0; i < inputs.length; i ) {
inputs[i].setAttribute("name", inputs[i].getAttribute("name") autocompleteString);
}
}
//remove the random characters from input names
function changeInputNamesBack(){
for (var i = 0; i < inputs.length; i ) {
inputs[i].setAttribute("name", inputs[i].getAttribute("name").replace(autocompleteString, ''));
}
}
function submission(){
let valid = true;
//do any additional form validation here
if(valid){
changeInputNamesBack();
}
return valid;
}
</script>
</html>uj5u.com熱心網友回復：
感謝@rydog 的幫助。我已將其更改為放入我的 js 檔案中的函式，因為我不想手動添加到每個頁面/在每個頁面上觸發 - 我還添加了帶有 js 的提交事件處理程式，而不是添加到提交表單。
Rydog 的絕佳解決方案
function stop_autofill() {
//generate a random string to append to the names
this.autocompleteString = btoa(Math.random().toString()).substr(10, 5);
this.add_submit_handlers = () => {
document.querySelectorAll("form").forEach(value => {
value.addEventListener("submit", (e) => {
this.form_submit_override(e)
})
})
}
//add random characters to input names
this.changeInputNames = () => {
for (var i = 0; i < this.input_elements_arr.length; i ) {
this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name") this.autocompleteString);
}
}
//remove the random characters from input names
this.changeInputNamesBack = () => {
for (var i = 0; i < this.input_elements_arr.length; i ) {
this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name").replace(this.autocompleteString, ''));
}
}
this.form_submit_override = (e) => {
e.preventDefault()
this.changeInputNamesBack()
e.currentTarget.submit()
return true
}
this.setup_form = () => {
//get all the inputs in the form
this.input_elements_arr = document.querySelectorAll("input");
this.changeInputNames();
this.add_submit_handlers();
}
//make sure script calls function after page load
this.init = () => {
if (document.readyState === "complete") {
this.setup_form()
} else {
let setup_form = this.setup_form
document.addEventListener("DOMContentLoaded", function (e) {
setup_form()
})
}
}
}
在需要它的頁面上
<script>
af = new stop_autofill()
af.init()
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/448184.html