Electron Fiddle中无需HTML元素的JavaScript prompt()替代方案

方案1：使用Electron原生的dialog.showInputBox #

这是Electron官方提供的原生对话框方案，完全不依赖HTML元素，适配系统原生UI风格。

渲染进程中调用（通过IPC） #

如果代码运行在渲染进程，需通过IPC向主进程请求调用对话框：

主进程代码（main.js）：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // 启用上下文隔离时需配置preload脚本
    }
  });

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

// 监听渲染进程的输入请求
ipcMain.handle('show-input-prompt', async (event, options) => {
  const result = await dialog.showInputBox(options);
  return result;
});

app.whenReady().then(createWindow);

渲染进程代码（canvas业务逻辑文件）：

const { ipcRenderer } = require('electron');

async function getUserInput() {
  const { response, canceled } = await ipcRenderer.invoke('show-input-prompt', {
    title: '请输入内容',
    label: '输入你的文本:',
    placeholder: '比如：Hello Canvas'
  });

  if (!canceled && response) {
    // 处理用户输入
    console.log('用户输入:', response);
    // 在这里更新canvas内容
  }
}

// 触发输入请求
getUserInput();

主进程中直接调用 #

如果逻辑在主进程，可直接调用：

const { dialog } = require('electron');

async function getInput() {
  const { response, canceled } = await dialog.showInputBox({
    title: '输入提示',
    label: '请输入参数:'
  });

  if (!canceled) {
    console.log('输入内容:', response);
  }
}

方案2：使用Node.js的readline模块（仅控制台场景） #

如果程序在Electron控制台环境运行（如调试阶段），可使用Node.js的readline模块读取输入，完全无UI依赖：

const readline = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout
});

readline.question('请输入内容:', (input) => {
  console.log('用户输入:', input);
  // 处理输入逻辑
  readline.close();
});

注意：该方案仅在控制台生效，不会弹出图形化对话框，适合后台逻辑调试或命令行交互场景。

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