JS 弹出输入框|极客笔记

JS 弹出输入框

在网页开发中，经常会遇到需要与用户交互的情况，比如需要用户输入某些信息。而弹出输入框是一种常见的解决方案。在本文中，我们将讨论如何使用 JavaScript 来实现弹出输入框，并介绍一些常见的应用场景。

1. 基本的弹出输入框

首先，让我们来看一个最基本的弹出输入框的实现方法。我们可以使用 prompt 函数来实现这个功能。下面是一个简单的示例：

var userInput = prompt("请输入您的姓名", "张三");

if (userInput != null) {
  alert("您输入的姓名是：" + userInput);
} else {
  alert("您取消了输入");
}

在这个示例中，当用户运行这段代码时，会弹出一个输入框，要求用户输入姓名。用户可以输入姓名后点击确定，也可以点击取消。如果用户点击确定，则会弹出一个提示框显示用户输入的姓名；如果用户点击取消，则会弹出一个提示框显示用户取消了输入操作。

2. 自定义样式的弹出输入框

虽然 prompt 是一个简单易用的方法，但是无法定制样式，无法实现更复杂的交互效果。在这种情况下，我们可以使用 HTML 和 CSS 来自定义样式，然后使用 JavaScript 来控制其显示和隐藏。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    input[type="text"] {
      width: 100%;
      margin-bottom: 10px;
      padding: 5px;
      font-size: 16px;
    }

    button {
      padding: 5px 10px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="modal">
  <input type="text" placeholder="请输入您的姓名" id="nameInput">
  <button id="submitButton">确定</button>
</div>

<script>
  var modal = document.querySelector(".modal");
  var nameInput = document.getElementById("nameInput");

  document.getElementById("submitButton").addEventListener("click", function() {
    var userInput = nameInput.value;
    if (userInput.trim() !== "") {
      alert("您输入的姓名是：" + userInput);
      modal.style.display = "none";
    } else {
      alert("请输入有效的姓名");
    }
  });

  modal.style.display = "block";
</script>

</body>
</html>

在这个示例中，我们通过 HTML 和 CSS 创建了一个自定义样式的弹出输入框，其中包含一个文本输入框和一个确定按钮。当用户点击确定按钮时，会检查输入框中的内容是否为空，如果不为空则弹出一个提示框显示用户输入的姓名，否则弹出一个提示框提示用户输入有效的姓名。