这个问题真的太戳痛点了——浏览器的自动填充有时候就像个热心过头的“自来熟”，明明咱们已经通过代码给输入框设好了值，它转头就给换成用户之前存的内容，完全不打招呼！我来给你分享几个可行的思路，尽量先绕开你不想碰的autocomplete或readonly属性：

1. 监听值变化，给自动填充“回滚”我们的设置 #

大部分浏览器在触发自动填充时，会给输入框派发input或者change事件；部分浏览器（比如Chrome）还有非标准的autocomplete事件可以监听。咱们可以利用这个特性，先记录下自己通过代码设置的值，一旦发现输入框的值被莫名改掉，就立刻把它改回来。

针对你提供的示例代码，咱们可以这么改：

const countryInput = document.getElementById('country');
let expectedValue = null;

// 封装一个设置值的函数，顺便记录下我们期望的值
function setCountry(val) {
  expectedValue = val;
  countryInput.value = val;
}

// 监听输入框的变化，判断是不是自动填充搞的鬼
countryInput.addEventListener('input', (e) => {
  if (expectedValue && e.target.value !== expectedValue) {
    // 把值改回我们设置的内容
    e.target.value = expectedValue;
    // 清空标记，避免一直拦截正常的用户输入
    expectedValue = null;
  }
});

// 给按钮绑定新的点击逻辑
document.querySelector('button').addEventListener('click', () => {
  setCountry('Australia');
});

另外要注意：有些浏览器的自动填充会在页面加载完成后延迟几秒触发，所以咱们还可以在页面加载后加个短延迟检查，比如：

window.addEventListener('load', () => {
  setTimeout(() => {
    if (expectedValue && countryInput.value !== expectedValue) {
      countryInput.value = expectedValue;
    }
  }, 1000); // 延迟1秒检查，这个时间可以根据实际情况调整
});

2. 用“替身输入框”混淆浏览器的自动填充逻辑 #

这个思路有点“曲线救国”——浏览器的自动填充通常会根据输入框的name属性、标签文本等信息匹配填充内容。咱们可以加一个隐藏的假输入框，让浏览器把内容填充到这个假的里面，而咱们实际用的输入框就不会被盯上了。

比如修改你的HTML：

<p>
  <label for="country">Country</label>
  <!-- 隐藏的替身，让浏览器自动填充到这里 -->
  <input name="country" type="text" style="position: absolute; left: -9999px; opacity: 0;">
  <!-- 咱们实际用的输入框，name可以改个不一样的 -->
  <input id="country" name="country-actual" type="text" />
</p>

不过这个方法的兼容性不算100%，不同浏览器的自动填充逻辑有差异，可能有些顽固的浏览器还是会找到真实的输入框，得自己测试下。

3. 万不得已的最后选择：动用autocomplete属性 #

如果上面的方法都不管用，那咱们只能退而求其次用你不想碰的autocomplete了。直接设autocomplete="off"有时候会被部分浏览器忽略，更靠谱的是给它设一个浏览器完全不识别的随机值，比如：

<input id="country" name="country" type="text" autocomplete="custom-unique-12345" />

这样浏览器就不会把这个输入框和它的自动填充条目匹配起来，自然就不会覆盖咱们设置的值了。

备注：内容来源于stack exchange，提问作者BumbleB2na