QR码生成器按钮点击后二维码短暂显示即消失问题求助

问题根源 #

按钮嵌套在<form>标签内，默认属于submit类型，点击后会触发表单默认提交行为，导致页面刷新，刚生成的QR码随即被清空。控制台无报错是因为页面刷新速度过快，错误信息被覆盖。

修复方案（二选一即可） #

方案1：将按钮类型改为button

直接修改按钮的type属性，彻底避免默认提交行为：

<button id="btn" type="button" onclick="generateQR()">Generate QR Code</button>

方案2：在函数中阻止默认提交行为

修改按钮的onclick事件，让函数返回false来阻止表单提交：

<button id="btn" onclick="return generateQR()">Generate QR Code</button>

同时更新JS函数，提前做输入校验并返回false：

function generateQR() {
  // 先校验输入是否为空
  if (!qrText.value.trim()) {
    alert("Please Enter URL");
    return false;
  }
  // 处理尺寸参数，默认150x150
  const size = qrSize.value && qrSize.value > 0 ? `${qrSize.value}x${qrSize.value}` : "150x150";
  // 对输入内容编码，避免特殊字符导致API请求失败
  qrImage.src = `https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${encodeURIComponent(qrText.value)}`;
  imgBox.classList.add("show-img");
  return false; // 阻止表单提交刷新
}

额外优化点 #

1. 给尺寸输入框添加默认值与范围限制，提升用户体验：

<input id="size" type="number" name="size" placeholder="Size (px)" value="150" min="50" max="500">

2. 增加输入框的trim()处理，避免用户输入空格导致的无效请求。

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