Question

我有一个带有多个文本输入的Web表单，最近一个特别开始的表单以某种方式自动链接到“城市”，Chrome仅从浏览器中存储的地址中提供选项。

名称和类型甚至与我在网上看到的浏览器regex规范中所匹配的名称甚至都不相符，即使使用我在其他论坛上发现的“ x-autocompletetype”似乎也没有影响。

<Ol id="ol">
    <li>
        <input type="checkbox">Read a novel
        <button>Edit</button>
        <button>Delete</button>
    </li>
    <li>
        <input type="checkbox">Take a walk
        <button>Edit</button>
        <button>Delete</button>
    </li>
</Ol>






let inputToDoList= document.getElementById('inputToDoList');

let addButton=  document.getElementById('addButton');
let editButton= document.createElement('button');
let deleteButton= document.createElement('button');
let checkInput= document.createElement('input');

checkInput.type= "checkbox"
deleteButton.innerText= "Delete"
editButton.innerText= "Edit"


addButton.addEventListener('click', () => {
   let ol= document.getElementsByTagName('ol')[0];
   let li= document.createElement('li');

   li.textContent= inputToDoList.value
   ol.appendChild(checkInput) 
   ol.appendChild(li)
   ol.appendChild(editButton)
   ol.appendChild(deleteButton)

   if(inputToDoList.value.length > 0){
      inputToDoList.value='';
}
});

直到最近，它仍在存储我们一直在此处填写的内容（例如“ 16 GB”），但是现在我们只是从浏览器中获取城市列表。

另外请注意：我知道名称不是空格，因为其他表单元素看起来像这样并且可以正常工作。

Answer 1

“容量”末尾的“城市”似乎正在触发自动填充。我认为正则表达式具有攻击性，因此可以匹配shipping-city之类的情况。

Answer 2

对于在字段未正确自动填充时寻找通用答案的任何人，请使用 autofill 属性指定要自动填充的正确值。此处显示可接受的值：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

示例：

<input type="text" name="firstName" autocomplete="given-name"/>
<input type="text" name="lastName" autocomplete="family-name"/>

在这种特殊情况下，可能没有确定的解决方案，因为名称“容量”可能会将字段与城市字段混淆（因为“城市”是“容量”的子字符串）。如果您的表单包含城市字段，请确保将 autocomplete="address-level2" 添加到您所在城市的输入标签中，尽管如果您的用户居住在具有多个行政级别的地方，这可能会产生意想不到的后果。

如果您没有城市字段，请尝试像这样创建隐藏字段：

<input type="hidden" autocomplete="address-level2"/>

不确定这是否可行。另一种选择是：

<input type="text" autocomplete="address-level2" style="height: 0; opacity: 0; visibility: hidden;"/>

Chrome将字段标识为“地址”以自动填充不正确

2 个答案: