Py-Script中如何正常使用input()函数？求替代方案

问题概述 #

在PyScript标签中使用Python内置input()函数时，会出现加载界面关闭前弹出输入提示，必须完成输入才会关闭加载界面的问题。尝试用JavaScript的Promise、文本输入框和按钮替代input()，但PyScript不会等待Promise解析，直接返回None。试过Skulpt、Flask+Ajax方案，均未解决，需要找到可行的浏览器端Python交互输入方案。

用户尝试的代码示例：

原生PyScript input()调用 #

<py-script>
    user_input = input("what is your name")
    print(user_input)
</py-script>

尝试调用自定义JS input函数 #

<py-script>
from js import input
user_input = input("what is your name?")
# 此处调用的是JS中定义的input函数，而非Python内置函数
</py-script>

自定义JS逻辑 #

var flag = false;
function click() {
    flag = true;
}
function waitUntilTrue() {
    return new Promise(resolve => {
      const check = () => {
        if (flag == false) {
          resolve();
        } else {
          setTimeout(check, 100);
        }
      };
      check();
    });
}
function input(prompt) {
    $("#show-question").text(prompt);
    waitUntilTrue();
    var userInput = $("#submit-input").val();
    return userInput;
}

可行解决方案 #

1. 修正PyScript与JS Promise的异步交互逻辑 #

你的JSinput()函数未正确等待Promise完成就返回值，导致PyScript拿到undefined（对应Python的None）。需修改为异步函数，并在PyScript中使用await等待结果：

步骤1：添加HTML交互区域

<div id="prompt-area">
  <p id="show-question"></p>
  <input type="text" id="submit-input">
  <button onclick="submitUserInput()">提交</button>
</div>

步骤2：修改JS异步逻辑

let inputResolver;

function submitUserInput() {
  const inputVal = document.getElementById('submit-input').value;
  if (inputResolver) {
    inputResolver(inputVal);
    inputResolver = null;
    document.getElementById('submit-input').value = '';
  }
}

// 暴露给Python的异步input函数
window.input = function(promptText) {
  document.getElementById('show-question').textContent = promptText;
  return new Promise(resolve => {
    inputResolver = resolve;
  });
}

步骤3：PyScript中使用await等待结果

<py-script>
import asyncio
from js import input

async def fetch_input():
    user_input = await input("what is your name?")
    print(user_input)

asyncio.ensure_future(fetch_input())
</py-script>

2. 使用PyScript原生交互组件 #

PyScript提供了py-input等原生组件，可直接实现交互：

<py-input id="name-input" placeholder="输入你的名字"></py-input>
<button onclick="triggerInput()">提交</button>

<py-script>
from pyodide.ffi import create_proxy
from js import document

def handle_submit(event):
    user_input = document.getElementById("name-input").value
    print(user_input)

document.getElementById("name-input").addEventListener("change", create_proxy(handle_submit))
</py-script>

3. 替代方案：直接使用Pyodide #

如果PyScript不符合需求，可直接用其底层依赖Pyodide手动管理环境与交互：

<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
<div>
  <p id="prompt-text"></p>
  <input id="user-input-box" type="text">
  <button id="submit-button">提交</button>
</div>
<script>
async function initPy() {
  const pyodide = await loadPyodide();
  
  // 向Python环境注入异步input函数
  pyodide.globals.set("input", async (prompt) => {
    document.getElementById("prompt-text").textContent = prompt;
    return new Promise(resolve => {
      document.getElementById("submit-button").onclick = () => {
        resolve(document.getElementById("user-input-box").value);
        document.getElementById("user-input-box").value = '';
      };
    });
  });
  
  // 运行带input的Python代码
  await pyodide.runPythonAsync(`
    import asyncio
    async def main():
        user_input = await input("what is your name?")
        print(user_input)
    asyncio.run(main())
  `);
}
initPy();
</script>

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