Electron 28.1.3中如何启用HTML邮箱输入框的自动补全功能？

Electron基于Chromium内核，本身支持邮箱输入的自动填充与历史保存功能，你的问题大概率是配置或代码细节没到位，以下是逐一排查的解决方案：

1. 检查BrowserWindow核心配置 #

确保创建窗口时的webPreferences和session设置没有禁用自动填充：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      enableAutoFill: true, // 关键配置，默认true但需确认未被手动关闭
      contextIsolation: true,
      webSecurity: true
    }
  });

  // 强制开启session级别的自动填充
  mainWindow.webContents.session.setAutofillEnabled(true);

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

2. 修正HTML标签的上下文与属性 #

Chromium需要表单上下文来识别并保存输入历史，确保你的input嵌套在form标签内，且属性配置正确：

<form action="#" method="post">
  <input 
    type="email" 
    id="email" 
    name="email" 
    autocomplete="email" 
    required
  >
  <button type="submit">提交</button>
</form>

• 必须保留name="email"，与autocomplete="email"对应；
• 不要添加readonly/disabled属性，这类属性会阻止自动填充；
• 若上述配置仍无效，可尝试将autocomplete值改为on或username email。

3. 启用Chromium命令行开关 #

通过Electron的命令行开关强制开启Chromium的自动填充相关特性，在app.whenReady()前添加：

app.commandLine.appendSwitch('enable-autofill-keyboard-accessory-view');
app.commandLine.appendSwitch('enable-autofill-server');

4. 排除前端框架或JS代码干扰 #

• 若使用React/Vue等框架，先测试纯静态HTML页面是否能正常保存历史，排除框架状态重置或事件拦截的影响；
• 检查是否有onfocus事件手动清空input值，或JS动态修改输入框内容的逻辑，这类操作会破坏自动填充流程。

5. 确认用户数据目录有效性 #

Electron会将自动填充数据保存在应用的用户数据目录中，若你手动设置了userData为临时目录，重启后数据会丢失：

// 错误示例：使用临时目录会导致历史丢失
app.setPath('userData', '/tmp/electron-app-data');

确保userData路径为持久化目录，默认路径无需修改即可正常保存数据。

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