electron怎么开启输入框点击后出现之前的填写记录，选择后填充到输入框中

Question

我在chrome浏览器访问页面是有自动填充的，但在electron中打开相同页面却没有

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

electron开启输入框点击后出现之前的填写记录，选择后填充到输入框中

electron中可以使用electron-store库来实现自动填充输入框的功能。下面是一个简单的示例：

首先，安装electron-store库：

npm install electron-store

然后，在你的electron应用中，创建一个store实例：

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

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL(`file://${__dirname}/index.html`);

  // 创建store实例
  const storage = new store();

  // 监听输入框的change事件
  win.webContents.on('did-finish-load', () => {
    const inputElement = document.querySelector('input');
    inputElement.addEventListener('change', (event) => {
      // 将输入框的值存储到store中
      storage.set('inputValue', inputElement.value);
    });
  });

  // 监听输入框的focus事件
  win.webContents.on('did-finish-load', () => {
    const inputElement = document.querySelector('input');
    inputElement.addEventListener('focus', (event) => {
      // 从store中获取之前的输入框值
      const inputValue = storage.get('inputValue');
      if (inputValue) {
        inputElement.value = inputValue;
      }
    });
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  app.quit();
});

在上面的代码中，我们创建了一个store实例，并监听输入框的change和focus事件。在change事件中，我们将输入框的值存储到store中。在focus事件中，我们从store中获取之前的输入框值，并将其设置为当前输入框的值。

在你的react.js应用中，你可以使用electron-store库来存储和获取输入框的值。例如：

import React, { useState, useEffect } from 'react';
import { store } from 'electron-store';

const InputField = () => {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // 从store中获取之前的输入框值
    const inputValueFromStore = store.get('inputValue');
    if (inputValueFromStore) {
      setInputValue(inputValueFromStore);
    }
  }, []);

  const handleInputChange = (event) => {
    // 将输入框的值存储到store中
    store.set('inputValue', event.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange}
    />
  );
};

在上面的代码中，我们使用useState Hook来存储输入框的值，并使用useEffect Hook来从store中获取之前的输入框值。在handleInputChange函数中，我们将输入框的值存储到store中。