在JavaScript中如何在用户点击取消按钮时重新弹出prompt提示框？

核心逻辑 #

• 原生prompt()方法的返回规则：用户点击「确定」返回输入的字符串，点击「取消」固定返回null
• 只要检测到返回值为null，就重新调用prompt()即可实现自动重弹，通常用循环结构实现更简洁，避免嵌套调用的冗余问题

实际场景示例（索要除数divisor数值） #

示例除了处理取消重弹逻辑外，额外增加了输入合法性校验，避免用户输入非数字、0这类无效除数：

let divisor;
while (true) {
  // 弹出prompt索要除数，提示文本可根据业务自定义
  const input = prompt('请输入除数（必须为非零数字）：');
  // 检测到用户点击取消，直接进入下一轮循环重弹prompt
  if (input === null) {
    continue;
  }
  // 去除输入首尾空格后转换为数字
  const inputNum = Number(input.trim());
  // 校验输入是否为合法的非零数字
  if (!isNaN(inputNum) && inputNum !== 0) {
    divisor = inputNum;
    break;
  }
  // 输入不合法时给出提示
  alert('输入无效，请重新输入非零数字');
}
// 后续业务逻辑可直接使用合法的divisor变量
console.log('获取到的有效除数：', divisor);

可选优化点 #

• 可根据业务需求增加最大弹出次数限制，避免用户无法正常退出流程
• 如果业务允许用户输入空值，注意不要把空字符串和取消返回的null混淆，空字符串是用户点击确定但未输入内容，属于两种完全不同的操作场景

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