移动端Chrome自动填充时未清除已输入文本问题求助

这确实是移动端Chrome上一个挺烦人的边缘场景bug，我之前也踩过类似的坑——明明选了自动填充的内容，结果输入框里变成了填充内容加自己先输的字符，体验特别糟。虽然这大概率是Chrome自身的逻辑问题，但咱们还是能通过代码手段来规避的，给你几个亲测有效的方案：

方案一：改用type="text"替代type="search" #

Chrome的这个bug似乎只针对type="search"的输入框，换成普通的文本输入框就能直接避开问题。如果还想保留原生搜索框的样式（比如右侧的清除按钮），可以用CSS模拟出来：

代码示例： #

<form method="get">
  <input type="text" name="search" class="form-control search-style" placeholder="Search for Item Name">
</form>

/* 模拟原生搜索框样式 */
input[type="text"].search-style {
  -webkit-appearance: searchfield;
  box-sizing: border-box;
}
/* 模拟搜索框的清除按钮 */
input[type="text"].search-style::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

这个方案兼容性最好，几乎不会有副作用，优先推荐。

方案二：用JavaScript监听事件，手动修正内容 #

如果必须保留type="search"的输入框，可以通过监听输入事件，判断自动填充的触发时机，然后手动修正输入框的值：

代码示例： #

const searchInput = document.querySelector('input[name="search"]');
let lastInputValue = '';

searchInput.addEventListener('input', function(e) {
  // 自动填充通常会让输入值突然大幅变长，且不是用户手动输入的（排除输入法组合状态）
  if (this.value.length > lastInputValue.length + 1 && !this.isComposing) {
    // 提取自动填充的完整内容（去掉之前输入的字符）
    const autoFilledContent = this.value.replace(lastInputValue, '');
    this.value = autoFilledContent;
  }
  lastInputValue = this.value;
});

不过这个方法需要多测试几种场景，比如不同的自动填充内容长度，确保逻辑不会误判。

方案三：禁用自动填充（应急方案） #

如果上面的方法都不行，可以尝试禁用输入框的自动填充功能，但这会牺牲用户体验，所以只建议作为最后手段：

代码示例： #

<input type="search" name="search" class="form-control" placeholder="Search for Item Name" 
       autocomplete="off" autocorrect="off" autocapitalize="off">

注意：Chrome有时候会忽略autocomplete="off"，可以试试换成autocomplete="new-password"（这是个小技巧，Chrome会对这个值更敏感），但同样会影响体验。

总的来说，方案一是最稳妥的，既能避开bug，又能保留搜索框的使用体验。如果有特殊需求必须用type="search"，方案二是比较靠谱的选择。

内容的提问来源于stack exchange，提问作者Jenbear