PyScript中替换Python input()弹窗为页面带提示输入框的方法

原生input()在PyScript环境中会触发浏览器系统弹窗，要实现页面内带提示的输入交互，需要结合HTML元素和PyScript的DOM操作来完成，以下是修改后的完整代码：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>DeXso's Project</title>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <h1>Just a Test</h1>
    
    <!-- 页面内输入区域，带提示文本 -->
    <div>
        <label for="number1">Number1:</label>
        <input type="text" id="number1" placeholder="请输入第一个数字">
    </div>
    <div style="margin-top: 10px;">
        <label for="number2">Number2:</label>
        <input type="text" id="number2" placeholder="请输入第二个数字">
    </div>
    
    <!-- 触发计算的按钮 -->
    <button py-click="calculate()" style="margin-top: 15px;">计算结果</button>
    
    <!-- 显示结果的区域 -->
    <div id="result" style="margin-top: 15px; font-size: 18px;"></div>
    
    <py-script src="Test_input.py"></py-script>
</body>
</html>

修改后的Python代码（Test_input.py） #

from pyscript import Element

def calculate():
    # 获取输入框中的内容
    number1 = Element("number1").value
    number2 = Element("number2").value
    
    # 处理输入并输出结果，增加异常判断避免非数字输入报错
    try:
        result = float(number1) + float(number2)
        Element("result").write(f"计算结果：{result}")
    except ValueError:
        Element("result").write("请输入有效的数字！")

核心改动说明 #

• HTML中新增带id的输入框、标签和按钮，按钮通过py-click属性绑定Python的calculate函数，点击即可触发计算
• Python代码引入pyscript.Element类，用来操作页面DOM元素，实现输入值获取和结果页面展示
• 增加异常处理逻辑，避免用户输入非数字内容导致程序报错

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