模拟window.prompt函数

// 功能：模拟window.prompt函数
// 使用示例
/*
showPrompt('请输入一些文本', '', (answer) => {
    console.log(`你输入的内容是: ${answer}`);
}, () => {
    console.log('操作已取消');
});
*/
/*
showPromptForm('请输入一些文本', `
    <input type="text" id="promptName" placeholder="标题" />
    <input type="text" id="promptHref" placeholder="链接" />
`, (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 = `
    <div class="prompt-text" id="promptText">请输入</div>
    <div class="prompt-input-container">
        <input type="text" id="promptInput" />
    </div>
    <div class="prompt-button-container">
        <button id="promptCancel">取消</button>
        <button id="promptSubmit">确认</button>
    </div>
    `;
    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;
})()