Pyodide v0.21.3：将input()的prompt替换为DOM UI输入的需求

核心思路 #

Pyodide提供了pyodide.setStdin()方法，可自定义输入获取逻辑，我们通过该方法替换默认的prompt弹窗，改为在页面渲染输入控件，等待用户交互后返回输入内容。

具体实现步骤 #

1. 准备DOM结构（HTML部分） #

在页面中添加用于输入的容器：

<div id="input-container" style="display: none; margin: 10px 0;">
  <label for="user-input">请输入内容：</label>
  <input type="text" id="user-input" style="margin: 0 8px;">
  <button id="submit-input">提交</button>
</div>

2. 编写JavaScript处理逻辑 #

重写Pyodide的stdin处理函数，控制DOM显示隐藏，等待用户提交后返回输入值：

// 初始化Pyodide后执行自定义输入逻辑
async function setupCustomInput() {
  const inputContainer = document.getElementById('input-container');
  const userInput = document.getElementById('user-input');
  const submitBtn = document.getElementById('submit-input');

  // 用Promise等待用户输入
  let inputResolver;
  function waitForUserInput() {
    return new Promise(resolve => {
      inputResolver = resolve;
      inputContainer.style.display = 'block';
      userInput.focus();
    });
  }

  // 绑定提交按钮事件
  submitBtn.addEventListener('click', () => {
    const inputValue = userInput.value.trim();
    userInput.value = '';
    inputContainer.style.display = 'none';
    inputResolver(inputValue + '\n'); // 加换行符模拟终端输入结束
  });

  // 将自定义输入逻辑绑定到Pyodide
  pyodide.setStdin({
    async readline() {
      return await waitForUserInput();
    }
  });
}

// 加载Pyodide并运行Python代码
async function loadPyodideAndRun() {
  self.pyodide = await loadPyodide({
    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/"
  });
  await setupCustomInput();
  
  // 执行你的Python代码示例
  await pyodide.runPythonAsync(`
x = input()
print(f"你输入的内容是：{x}")
`);
}

loadPyodideAndRun();

3. 关键说明 #

• pyodide.setStdin()接收的对象中，readline方法需返回Promise，Pyodide会等待Promise完成后继续执行Python代码
• 提交输入时添加换行符，是为了匹配常规终端输入的结束格式，确保Python的input()能正确接收
• 该逻辑支持多次input()调用，每次调用都会触发输入容器的显示

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