js 实现prompt
使用 JavaScript 实现 prompt
在 JavaScript 中，prompt 是一个内置函数，用于显示一个对话框，提示用户输入文本。以下是如何使用 prompt 的基本方法：
let userInput = prompt("请输入您的姓名：", "默认值");这段代码会弹出一个对话框，显示提示信息“请输入您的姓名：”，并提供一个默认值为“默认值”的输入框。用户输入的内容会被存储在变量 userInput 中。
处理用户输入
用户点击“取消”或关闭对话框时，prompt 返回 null。可以通过条件判断处理这种情况：
let userInput = prompt("请输入您的年龄：");
if (userInput !== null) {
console.log("您输入的年龄是：" + userInput);
} else {
console.log("用户取消了输入");
}结合数据类型转换
prompt 返回的值始终是字符串类型。如果需要数值或其他类型，需手动转换：
let age = prompt("请输入您的年龄：");
if (age !== null) {
age = parseInt(age);
if (!isNaN(age)) {
console.log("明年您的年龄将是：" + (age + 1));
} else {
console.log("请输入有效的数字");
}
}自定义样式限制
浏览器自带的 prompt 无法自定义样式。如果需要更灵活的输入框，可以通过 HTML 和 CSS 创建自定义模态框，并用 JavaScript 控制其行为：
<div id="customPrompt" style="display:none;">
<p>请输入您的邮箱：</p>
<input type="text" id="customInput">
<button onclick="handleCustomPrompt()">提交</button>
</div>
<script>
function showCustomPrompt() {
document.getElementById("customPrompt").style.display = "block";
}
function handleCustomPrompt() {
let input = document.getElementById("customInput").value;
console.log("用户输入：" + input);
document.getElementById("customPrompt").style.display = "none";
}
</script>安全注意事项
使用 prompt 时需注意：
- 不要依赖它进行敏感信息输入，因为用户可能取消操作
- 对输入内容进行验证，防止恶意代码注入
- 在现代网页设计中，建议使用更友好的表单替代频繁的弹窗
浏览器兼容性
所有主流浏览器都支持 prompt 方法，但在以下场景可能被阻止：
- 移动设备浏览器
- 设置了弹窗拦截的浏览器
- 某些嵌入式 WebView 环境
替代方案
对于现代 Web 应用，可以考虑以下替代方案：
- 使用 HTML5 表单元素
- 实现自定义模态对话框
- 采用前端框架如 React、Vue 的对话框组件
这些方法提供了更好的用户体验和更灵活的样式控制。
