// 功能：模拟window.prompt函数
// 使用示例
/*
showPrompt('请输入一些文本', '', (answer) => {
console.log(`你输入的内容是: ${answer}`);
}, () => {
console.log('操作已取消');
});
*/
/*
showPromptForm('请输入一些文本', `
`, (answer) => {
console.log(`你输入的内容是: ${answer}`);
}, () => {
console.log('操作已取消');
});
*/
(()=>{
const dialogStyleText = `
.prompt-dialog {
display: none;
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 300px; /* 设置初始宽度 */
text-align: left; /* 左对齐 */
font-size: 14px;
}
.prompt-dialog .prompt-text {
margin-bottom: 10px;
}
.prompt-dialog .prompt-input-container {
margin-bottom: 20px;
}
.prompt-dialog .prompt-input-container input[type="text"] {
width: calc(100% - 16px); /* 输入框占满容器宽度 */
padding: 5px; /* 增加填充 */
margin-bottom: 10px;
}
.prompt-dialog .prompt-input-container input[type="text"]:last-child {
margin-bottom: 0;
}
.prompt-dialog .prompt-button-container {
display: flex;
justify-content: flex-end; /* 按钮靠右 */
}
.prompt-dialog button {
margin-left: 10px;
}
`;
const dialogHtml = `
请输入
`;
const dialogStyle = document.createElement('style');
dialogStyle.textContent = dialogStyleText;
document.head.appendChild(dialogStyle);
const dialog = document.createElement('div');
dialog.className = 'prompt-dialog';
dialog.id = 'promptDialog';
dialog.innerHTML = dialogHtml;
document.body.appendChild(dialog);
const promptContainer = document.querySelector(".prompt-input-container");
const submitButton = document.getElementById('promptSubmit');
const cancelButton = document.getElementById('promptCancel');
const promptText = document.getElementById('promptText');
// 修改 showPrompt 函数以接受第二个参数作为取消的回调函数
function showPrompt(message, defaultValue, submitCallback, cancelCallback, okName="确定", cancelName="取消") {
const input = document.getElementById('promptInput');
promptText.textContent = message;
input.value = defaultValue || ''; // 清空输入框
input.focus(); // 获取焦点
submitButton.textContent = okName || '确定';
cancelButton.textContent = cancelName || '取消';
if(!cancelName) cancelButton.style.display = 'none';
dialog.style.display = 'block';
submitButton.addEventListener('click', () => {
submitCallback(input.value); // 调用回调函数传递输入值
dialog.style.display = 'none'; // 隐藏对话框
});
cancelButton.addEventListener('click', () => {
dialog.style.display = 'none'; // 隐藏对话框
if (cancelCallback) {
cancelCallback(); // 如果有取消的回调函数，则调用它
}
});
}
function showPromptForm(message, html, submitCallback, cancelCallback, initCallback, okName="确定", cancelName="取消") {
if(html) promptContainer.innerHTML = html;
if(typeof initCallback === 'function') initCallback();
promptText.textContent = message;
submitButton.textContent = okName || '确定';
cancelButton.textContent = cancelName || '取消';
if(!cancelName) cancelButton.style.display = 'none';
dialog.style.display = 'block';
submitButton.addEventListener('click', () => {
if(typeof submitCallback === 'function') submitCallback();
dialog.style.display = 'none';
});
cancelButton.addEventListener('click', () => {
dialog.style.display = 'none';
if (typeof cancelCallback === 'function') {
cancelCallback();
}
});
}
// 输出到全局变量
if (typeof window.showPrompt !== 'function') window.showPrompt = showPrompt;
if (typeof window.showPromptForm !== 'function') window.showPromptForm = showPromptForm;
})()