js 弹出输入窗

在JavaScript中，弹出输入窗通常是通过prompt()函数实现的。这个函数会显示一个对话框，提示用户输入一些文本。用户可以在对话框中输入文本，然后点击“确定”或“取消”按钮。

基础概念

prompt()函数是JavaScript中的一个内置函数，用于显示一个对话框，提示用户输入数据。这个函数返回用户输入的文本，如果用户点击“取消”，则返回null。

类型

prompt()函数没有类型，因为它是一个函数，而不是数据类型。

应用场景

prompt()函数通常用于简单的用户交互，例如：

获取用户的名字或其他信息。
在需要用户输入一些简单数据时使用。

示例代码

let userInput = prompt("请输入您的名字：");

if (userInput !== null) {
    alert("你好，" + userInput + "!");
} else {
    alert("用户取消了输入。");
}

遇到的问题及解决方法

样式单一：prompt()函数的样式在不同的浏览器中可能有所不同，且无法自定义样式。解决方法是使用自定义的模态框来替代prompt()函数。
用户体验：频繁使用prompt()函数可能会影响用户体验，因为它会阻塞页面的其他交互。解决方法是尽量减少使用prompt()函数，或者使用更友好的用户界面元素，如表单或自定义对话框。
安全性：prompt()函数获取的数据可以被用户随意输入，可能会带来安全风险，如XSS攻击。解决方法是对于用户输入的数据进行严格的验证和过滤。

自定义模态框示例

如果需要更复杂的用户交互，可以使用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: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>

<div id="myModal" class="modal">
  <div class="modal-content">
    <p>请输入您的名字：</p>
    <input type="text" id="userName">
    <button onclick="submitName()">确定</button>
    <button onclick="closeModal()">取消</button>
  </div>
</div>

<button onclick="openModal()">打开输入窗</button>

<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

function submitName() {
  let userInput = document.getElementById("userName").value;
  if (userInput) {
    alert("你好，" + userInput + "!");
  }
  closeModal();
}
</script>

</body>
</html>

这个示例展示了如何使用HTML、CSS和JavaScript创建一个自定义的模态框来替代prompt()函数，从而提供更好的用户体验和更多的样式自定义选项。