如何让安卓Firefox等移动端浏览器禁用HTML输入自动补全与修正

问题背景 #

我一直在寻找方法，让移动端浏览器原样接收文本输入，不被autocomplete、autocapitalize这类功能自动修正输入内容——核心是要获取用户输入的“原始错误”内容，方便后续手动识别拼写错误和笔误。
在安卓端Chrome 87版本上，使用通用的标记方案即可完美实现效果：

<form>
  <input type="text" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false">
</form>

注：实际测试中，Chrome甚至不需要用到非标准化的autocorrect和spellcheck属性，仅靠前两个属性就能完成禁用逻辑。

遇到的适配问题 #

这套通用方案在安卓端Firefox 84版本上完全失效：比如逐字符输入english 时，内容会被自动替换为首字母大写的English 。
测试时使用设置为英语（美国）的三星键盘，自动替换规则和所用键盘的语言设置强相关，可通过公开测试页面验证不同浏览器的表现差异。

核心诉求 #

有没有办法让Firefox（理想情况下覆盖其他主流移动端浏览器）也能像Chrome一样，通过上述标记逻辑，让输入框原样接收用户输入的内容？ #

适配解决方案 #

• Firefox移动端专属属性补全
  Firefox移动端的自动大写修正逻辑，除了识别autocapitalize="none"之外，还对表单类输入框的默认格式化策略做了特殊权限控制，单靠通用属性没法完全禁用系统层面的自动替换，需要额外补充两个配置：
  1. 给input添加inputmode="text"属性，明确告知浏览器当前输入框不需要执行默认的文本格式化规则
  2. 添加data-1p-ignore属性，绕过Firefox对账号、表单类输入框的默认自动补正策略
• 全场景兜底输入拦截
  所有浏览器都没法100%拦截第三方键盘触发的自动替换行为，可通过前端input事件做实时值拦截，保证拿到用户的原始输入：

  let rawInput = '';
  const targetInput = document.querySelector('input');
  targetInput.addEventListener('input', (e) => {
    const currentVal = e.target.value;
    // 字符数增量在1以内时判定为用户手动输入，同步更新原始值
    if (Math.abs(currentVal.length - rawInput.length) <= 1) {
      rawInput = currentVal;
    } else {
      // 检测到自动修正导致的字符跳变时，将输入值重置为已记录的原始值
      e.target.value = rawInput;
    }
  })
  

  这套逻辑可以覆盖所有移动端浏览器的自动修正场景，不受浏览器内核差异影响。
• 第三方键盘的边界说明
  部分安卓键盘（如三星、Gboard）的内置自动修正功能优先级高于浏览器配置，浏览器层面的属性只能拦截浏览器自带的拼写检查、自动大写逻辑，没法强制接管第三方键盘的内置行为。如果需要拿到完全未经过键盘修正的输入，可在输入框旁添加轻量提示，引导用户关闭键盘自带的自动修正功能。

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