如何实现JavaScript双输入prompt()功能？求对应实现代码

原生JavaScript确实没有内置支持双输入字段的prompt()函数，但你提到的站点中的双输入弹窗，并非Cloudflare等服务商的服务器脚本，而是前端自定义实现的模态框。你无法获取源码的原因是这些站点启用了反爬/代码混淆机制，动态加载或压缩了前端代码，同时站点的访问控制策略导致Wayback Machine和fetch()无法正常获取内容。

以下是两种可行的实现方案：

一、原生JavaScript实现 #

不需要依赖任何第三方库，纯原生JS构建双输入模态框：

function doublePrompt(title, label1, label2) {
  // 创建模态遮罩层
  const modalOverlay = document.createElement('div');
  modalOverlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
  `;

  // 创建对话框容器
  const dialogBox = document.createElement('div');
  dialogBox.style.cssText = `
    background-color: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  `;

  // 添加标题
  const dialogTitle = document.createElement('h4');
  dialogTitle.textContent = title;
  dialogTitle.style.margin = '0';
  dialogBox.appendChild(dialogTitle);

  // 第一个输入组
  const inputGroup1 = document.createElement('div');
  inputGroup1.innerHTML = `
    <label style="display: block; margin-bottom: 4px;">${label1}</label>
    <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
  `;
  dialogBox.appendChild(inputGroup1);

  // 第二个输入组
  const inputGroup2 = document.createElement('div');
  inputGroup2.innerHTML = `
    <label style="display: block; margin-bottom: 4px;">${label2}</label>
    <input type="text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
  `;
  dialogBox.appendChild(inputGroup2);

  // 按钮组
  const buttonGroup = document.createElement('div');
  buttonGroup.style.cssText = `
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  `;

  const confirmBtn = document.createElement('button');
  confirmBtn.textContent = '确认';
  confirmBtn.style.cssText = `
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  `;

  const cancelBtn = document.createElement('button');
  cancelBtn.textContent = '取消';
  cancelBtn.style.cssText = `
    padding: 8px 16px;
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  `;

  buttonGroup.appendChild(confirmBtn);
  buttonGroup.appendChild(cancelBtn);
  dialogBox.appendChild(buttonGroup);

  modalOverlay.appendChild(dialogBox);
  document.body.appendChild(modalOverlay);

  // 返回Promise处理用户输入
  return new Promise((resolve) => {
    const input1 = inputGroup1.querySelector('input');
    const input2 = inputGroup2.querySelector('input');

    // 确认按钮逻辑
    confirmBtn.addEventListener('click', () => {
      resolve({
        confirmed: true,
        value1: input1.value.trim(),
        value2: input2.value.trim()
      });
      document.body.removeChild(modalOverlay);
    });

    // 取消按钮逻辑
    cancelBtn.addEventListener('click', () => {
      resolve({ confirmed: false });
      document.body.removeChild(modalOverlay);
    });

    // 点击遮罩层关闭
    modalOverlay.addEventListener('click', (e) => {
      if (e.target === modalOverlay) {
        resolve({ confirmed: false });
        document.body.removeChild(modalOverlay);
      }
    });
  });
}

// 使用示例
doublePrompt('身份验证', '用户名', '密码').then(result => {
  if (result.confirmed) {
    console.log('用户名:', result.value1, '密码:', result.value2);
    // 这里可以添加后续逻辑，比如提交表单
  } else {
    console.log('用户取消操作');
  }
});

二、jQuery + jQuery UI Dialog实现 #

如果你习惯使用jQuery，结合jQuery UI的Dialog组件可以快速实现：

<!-- 先引入依赖资源 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script>
function doublePromptJQuery(title, label1, label2) {
  // 构建对话框内容
  const dialogContent = `
    <div class="dialog-inputs">
      <div>
        <label>${label1}</label>
        <input type="text" id="input-field-1" style="width: 100%; margin: 8px 0;">
      </div>
      <div>
        <label>${label2}</label>
        <input type="text" id="input-field-2" style="width: 100%; margin: 8px 0;">
      </div>
    </div>
  `;

  return new Promise((resolve) => {
    // 初始化Dialog
    $(dialogContent).dialog({
      title: title,
      modal: true,
      width: 400,
      buttons: {
        '确认': function() {
          resolve({
            confirmed: true,
            value1: $('#input-field-1').val().trim(),
            value2: $('#input-field-2').val().trim()
          });
          $(this).dialog('destroy').remove();
        },
        '取消': function() {
          resolve({ confirmed: false });
          $(this).dialog('destroy').remove();
        }
      },
      close: function() {
        $(this).dialog('destroy').remove();
      }
    });
  });
}

// 使用示例
doublePromptJQuery('请输入信息', '邮箱', '验证码').then(result => {
  if (result.confirmed) {
    console.log('邮箱:', result.value1, '验证码:', result.value2);
  } else {
    console.log('用户取消');
  }
});
</script>

补充说明 #

你遇到的站点无法获取源码、Wayback Machine返回401、fetch()失败，都是因为站点启用了反爬机制或访问控制策略，比如Cloudflare的JS Challenge会动态加载验证脚本，混淆后的代码难以直接阅读，但核心功能还是前端实现的模态框，并非服务器端脚本。

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