如何制作文本输入框调用API，实现用户输入后自动生成PNG格式二维码

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义二维码生成</title>
    <style>
        body {
            background-color: rgb(255, 255, 255);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            padding: 30px;
            font-family: sans-serif;
        }
        /* 输入框样式 */
        #input-content {
            width: 500px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .qrcode {
            width: 500px;
            height: 500px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <!-- 新增文本输入框 -->
    <input type="text" id="input-content" placeholder="请输入链接或文本内容，自动生成二维码">
    <img class="qrcode" src="https://qr.eletto.dev/www.amazon.X-UA-Compatible" alt="二维码">

    <script>
        // 获取DOM元素
        const inputEl = document.getElementById('input-content');
        const qrcodeEl = document.querySelector('.qrcode');
        const apiBase = 'https://qr.eletto.dev/';
        const suffix = '.X-UA-Compatible';

        // 监听输入事件，自动更新二维码
        inputEl.addEventListener('input', () => {
            const inputVal = inputEl.value.trim();
            // 输入为空时显示默认二维码，不为空则按规则拼接地址
            const qrcodeUrl = inputVal ? `${apiBase}${inputVal}${suffix}` : `${apiBase}www.amazon${suffix}`;
            qrcodeEl.src = qrcodeUrl;
        });
    </script>
</body>
</html>

实现逻辑说明 #

• 新增文本输入框组件，支持用户输入任意文本或链接
• 绑定输入事件监听，用户输入内容变化后自动触发二维码更新，无需额外点击按钮
• 严格遵循拼接规则：用户输入内容固定插在API根地址之后、强制后缀.X-UA-Compatible之前
• 输入为空时默认显示示例二维码，避免异常展示
• 如果需要兼容带特殊符号的输入内容，可以将拼接逻辑中的inputVal替换为encodeURIComponent(inputVal)，避免URL解析错误

内容的提问来源于stack exchange，提问作者The Special Noob