如何使用Py-script在HTML中创建支持整数/浮点数的输入框？

直接用HTML原生<input>配合Py-script就能实现，不用依赖tkinter。下面是完整的可运行示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Py-script 数字输入框</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h3>请输入整数或浮点数</h3>
    <!-- HTML数字输入框，支持整数和浮点数 -->
    <input type="number" id="num-input" step="any" placeholder="输入数字...">
    <button id="submit-btn" py-click="process_input">提交</button>
    <p id="result-output"></p>

    <py-script>
        from pyscript import Element

        def process_input():
            # 获取输入框与输出元素
            input_elem = Element("num-input")
            output_elem = Element("result-output")
            
            # 读取输入值并做有效性校验
            input_value = input_elem.value
            if not input_value:
                output_elem.write("请输入有效的数字")
                return
            
            try:
                # 转换为浮点数，兼容整数与浮点数输入
                num = float(input_value)
                # 按需区分整数/浮点数显示
                if num.is_integer():
                    num = int(num)
                    output_elem.write(f"你输入的是整数：{num}")
                else:
                    output_elem.write(f"你输入的是浮点数：{num}")
            except ValueError:
                output_elem.write("输入内容不是有效的数字，请重新输入")
    </py-script>
</body>
</html>

关键细节说明： #

• HTML的<input type="number">原生支持数字输入，step="any"参数允许输入任意精度的浮点数；如果只需要整数输入，移除该参数即可。
• 通过Py-script的Element类可以直接操作网页DOM元素，实现输入值读取与结果输出。
• 用try-except捕获类型转换异常，避免无效输入导致的报错。
• 利用is_integer()方法可以判断输入是否为整数，实现差异化显示逻辑。

这个方案完全适配网页环境，无需依赖tkinter这类桌面GUI库，完美兼容Pyodide运行环境。

内容的提问来源于stack exchange，提问作者Somebody like you