如何用原生JavaScript实现支持文本/数字输入并返回数据的弹窗？

原生JavaScript本身提供了prompt()方法，可以直接生成带输入框的弹窗来获取用户输入，我们可以基于它封装出你需要的readLine和readInt方法：

1. 实现readLine方法 #

readLine的核心是获取用户输入的字符串，直接封装prompt()即可：

function readLine(message) {
  // 弹出输入框，返回用户输入的字符串；用户点击取消则返回null
  return prompt(message);
}

2. 实现readInt方法 #

readInt需要确保用户输入的是有效整数，所以要增加输入验证逻辑，循环提示直到输入合法：

function readInt(message) {
  let input;
  do {
    input = prompt(message);
    
    // 处理用户取消输入的情况
    if (input === null) {
      return null;
    }
    
    // 去除输入前后空格，转换为十进制整数
    const trimmedInput = input.trim();
    const num = parseInt(trimmedInput, 10);
    
    // 验证是否为有效整数：不是NaN，且输入字符串和转换后的数字字符串完全匹配
    if (!isNaN(num) && num.toString() === trimmedInput) {
      return num;
    }
    
    // 输入无效时提示用户重新输入
    alert("请输入有效的整数！");
  } while (true);
}

使用示例 #

// 获取字符串输入
const userNickname = readLine("请输入你的昵称：");
if (userNickname !== null) {
  console.log(`欢迎你，${userNickname}！`);
}

// 获取整数输入
const userScore = readInt("请输入你的考试分数：");
if (userScore !== null) {
  console.log(`你的分数是${userScore}分`);
}

关键说明 #

• prompt()在用户点击「取消」时会返回null，使用时建议判断该情况，避免后续逻辑出错
• parseInt第二个参数传入10，确保按照十进制解析数字，避免默认八进制解析的问题
• 整数验证时，通过num.toString() === trimmedInput确保输入的是纯整数，排除类似"12.5"（会被parseInt转为12）这类非整数输入

内容的提问来源于stack exchange，提问作者That New Coder