js怎么在弹窗输入一组数据

在JavaScript中，可以通过弹窗输入一组数据，使用prompt、利用数组存储输入值、并进行验证和处理。 让我们详细讨论如何实现这一功能。

一、使用prompt收集数据

JavaScript 的 prompt 函数能够弹出一个对话框，让用户输入数据。通过多次调用 prompt，我们可以让用户输入一组数据，并存储在数组中。

let dataArray = [];
let numberOfInputs = prompt("请输入要输入的数据数量：");
for (let i = 0; i < numberOfInputs; i++) {
  let input = prompt(`请输入第${i + 1}个数据：`);
  dataArray.push(input);
}
console.log(dataArray);

二、验证和处理输入数据

在实际应用中，用户输入的数据可能会有各种问题（如格式错误、空输入等）。因此，我们需要对输入的数据进行验证和处理。

function isValidInput(input) {
  // 进行一些基础的验证，比如非空
  return input !== null && input.trim() !== "";
}
let dataArray = [];
let numberOfInputs = prompt("请输入要输入的数据数量：");
for (let i = 0; i < numberOfInputs; i++) {
  let input;
  do {
    input = prompt(`请输入第${i + 1}个数据：`);
    if (!isValidInput(input)) {
      alert("输入无效，请重新输入。");
    }
  } while (!isValidInput(input));
  dataArray.push(input);
}
console.log(dataArray);

三、优化用户体验

为了更好地用户体验，我们可以使用自定义的 HTML 弹窗而不是默认的 prompt。这需要结合 HTML 和 CSS，创建一个自定义的弹窗，并使用 JavaScript 控制其显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Prompt</title>
  <style>
    /* 样式定义 */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
      padding-top: 60px;
    }
    .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<h2>Custom Prompt Example</h2>
<button id="openModalBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="modalTitle">Please enter your data:</p>
    <input type="text" id="modalInput">
    <button id="submitBtn">Submit</button>
  </div>
</div>
<script>
  // 获取元素
  let modal = document.getElementById("myModal");
  let btn = document.getElementById("openModalBtn");
  let span = document.getElementsByClassName("close")[0];
  let submitBtn = document.getElementById("submitBtn");
  let modalInput = document.getElementById("modalInput");
  // 打开模态框
  btn.onclick = function() {
    modal.style.display = "block";
  }
  // 关闭模态框
  span.onclick = function() {
    modal.style.display = "none";
  }
  // 在用户点击其他地方时关闭模态框
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  // 处理提交按钮点击事件
  submitBtn.onclick = function() {
    let inputValue = modalInput.value;
    if (isValidInput(inputValue)) {
      alert("Input received: " + inputValue);
      modal.style.display = "none";
    } else {
      alert("Invalid input, please try again.");
    }
  }
  function isValidInput(input) {
    return input !== null && input.trim() !== "";
  }
</script>
</body>
</html>

四、使用高级库和框架

对于更复杂的需求，可以使用前端框架（如 React、Vue.js）或库（如 SweetAlert）来创建更加美观和功能强大的弹窗。

4.1 使用 SweetAlert

SweetAlert 是一个非常流行的 JavaScript 库，用于创建自定义的弹窗。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SweetAlert Example</title>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<button id="openSwal">Open SweetAlert</button>
<script>
  document.getElementById("openSwal").onclick = function() {
    swal("Enter your data:", {
      content: "input",
    })
    .then((value) => {
      if (isValidInput(value)) {
        swal(`You entered: ${value}`);
      } else {
        swal("Invalid input, please try again.");
      }
    });
  };
  function isValidInput(input) {
    return input !== null && input.trim() !== "";
  }
</script>
</body>
</html>

4.2 使用前端框架

如果你正在使用前端框架（如 React、Vue.js），可以利用其组件化的特性，创建更加灵活的弹窗组件。以下是一个使用 React 的简单示例：

import React, { useState } from 'react';
import Modal from 'react-modal';
Modal.setAppElement('#root');
function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const openModal = () => setModalIsOpen(true);
  const closeModal = () => setModalIsOpen(false);
  const handleSubmit = () => {
    if (isValidInput(inputValue)) {
      alert(`You entered: ${inputValue}`);
      closeModal();
    } else {
      alert("Invalid input, please try again.");
    }
  };
  const isValidInput = (input) => input !== null && input.trim() !== "";
  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>Please enter your data:</h2>
        <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        <button onClick={handleSubmit}>Submit</button>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}
export default App;

五、总结

在JavaScript中实现弹窗输入一组数据，可以通过多种方式实现，包括使用原生的 prompt、自定义 HTML 弹窗、以及高级库和前端框架。每种方法都有其优缺点，选择适合自己项目需求的方案是关键。通过有效的数据验证和优化用户体验，可以确保输入数据的质量和用户的操作便捷性。