当前位置：首页 > JavaScript

js 实现prompt

2026-04-06 20:38:10JavaScript

使用 JavaScript 实现 prompt 输入框

JavaScript 中的 prompt() 是一个内置方法，用于显示一个对话框，提示用户输入文本。以下是如何使用它的方法和注意事项：

基本语法

let userInput = prompt(message, defaultText);

message 是显示给用户的提示信息（可选）。
defaultText 是输入框的默认值（可选）。
返回值是用户输入的字符串，如果用户取消则返回 null。

示例代码

let name = prompt("请输入你的名字", "张三");
if (name !== null) {
  alert(`你好, ${name}!`);
} else {
  alert("你取消了输入。");
}

自定义样式和功能的替代方案

由于原生 prompt() 的样式和功能受限，可以使用 HTML 和 CSS 创建自定义模态框来替代：

HTML 结构

<div id="customPrompt" style="display:none;">
  <div class="prompt-box">
    <p id="promptMessage">请输入信息:</p>
    <input type="text" id="promptInput">
    <button id="promptOk">确定</button>
    <button id="promptCancel">取消</button>
  </div>
</div>

JavaScript 实现

function showCustomPrompt(message, defaultValue, callback) {
  const promptBox = document.getElementById('customPrompt');
  const promptMessage = document.getElementById('promptMessage');
  const promptInput = document.getElementById('promptInput');

  promptMessage.textContent = message;
  promptInput.value = defaultValue || '';
  promptBox.style.display = 'block';

  document.getElementById('promptOk').onclick = function() {
    promptBox.style.display = 'none';
    callback(promptInput.value);
  };

  document.getElementById('promptCancel').onclick = function() {
    promptBox.style.display = 'none';
    callback(null);
  };
}

// 使用示例
showCustomPrompt("请输入你的年龄", "18", function(response) {
  if (response !== null) {
    alert(`你输入的年龄是: ${response}`);
  } else {
    alert("输入已取消");
  }
});

使用第三方库

对于更复杂的需求，可以使用第三方库如 SweetAlert2：

安装 SweetAlert2

npm install sweetalert2

使用示例

js 实现prompt

import Swal from 'sweetalert2';

Swal.fire({
  title: '请输入邮箱',
  input: 'text',
  inputValue: 'user@example.com',
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) {
      return '请输入有效的邮箱地址!';
    }
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('用户输入:', result.value);
  }
});