登录注册

js 代码片段模拟 window.prompt 函数

本贴最后更新于 369 天前，其中的信息可能已经渤澥桑田

众所周知，思源不支持 prompt，确切的说 Electron 不支持。

但有时写脚本时确实需要一些交互式操作，如果使用思源 api 调用 Dialog 确实可以实现，但终究是麻烦了些。

就自己动手写了一个 prompt 模拟函数，放到 js 代码片段中即可，然后需要的时候就可以直接调用了。

效果

接口定义如下


// 弹出prompt对话框
// 参数说明
// message 提示消息，类似标题
// defaultValue 输入框默认值
// okName 确认按钮名字
// cancelName 取消按钮名字
// width对话框宽度，默认400，高度根据内容自适应
// modalMode，是否模态窗口，模态窗口，除了当前对话框，其他地方无法点击，false非模态窗，true模态窗
// clickOverlayClose 是否点击遮罩层关闭对话框，仅在模态窗口下有效
function showPrompt(message = '', defaultValue = '', okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false);


// 弹出自定义prompt对话框（可自定义定义复杂表单）
// 参数说明
// message 提示消息，类似标题
// html 对话框自定义表单内容的HTML代码
// onSubmit 提交时的回调函数，对话框的返回值依赖于这个回调函数的返回值
// onOpen 打开窗口时的回调函数，可以在打开窗口话进行一些初始化操作，比如某个输入框设为焦点
// okName 确认按钮名字
// cancelName 取消按钮名字
// width 对话框宽度，默认400px，高度根据内容自适应
// modalMode，是否模态窗口，模态窗口，除了当前对话框，其他地方无法点击，false非模态窗，true模态窗
// clickOverlayClose 是否点击遮罩层关闭对话框，仅在模态窗口下有效
function showPromptForm(message = '', html = '', onSubmit = null, onOpen = null, okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false);

调用示例


// showPrompt 示例用法
const result = await showPrompt('这里是提示文本', '');
console.log(result);


// showPromptForm 示例用法
const result = await showPromptForm('这里是提示文本', `
  <input type="text" id="promptName" placeholder="标题" />
  <input type="text" id="promptHref" placeholder="链接" />
`, (promptContainer) => {
    const inputs = promptContainer.querySelectorAll('input[type="text"]');
    const values = Array.from(inputs).map(input => input.value);
    return values;
}, ()=> {
    document.getElementById("promptName").focus();
});
console.log(result);

完整代码如下


// 功能：模拟window.prompt函数
// 使用示例
/*
// showPrompt 示例用法
const result = await showPrompt('这里是提示文本', '');
console.log(result);

// showPromptForm 示例用法
const result = await showPromptForm('这里是提示文本', `
  <input type="text" id="promptName" placeholder="标题" />
  <input type="text" id="promptHref" placeholder="链接" />
`, (promptContainer) => {
    const inputs = promptContainer.querySelectorAll('input[type="text"]');
    const values = Array.from(inputs).map(input => input.value);
    return values;
}, ()=> {
    document.getElementById("promptName").focus();
});
console.log(result);
*/
(()=>{
    // 样式变量
    const dialogStyleText = `
    .prompt-dialog {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        border: 1px solid var(--b3-theme-surface-lighter);
        border-radius: var(--b3-border-radius-b);
        box-shadow: var(--b3-dialog-shadow);
        width: 400px; /* 设置初始宽度 */
        text-align: left; /* 左对齐 */
        font-size: 100%;
        font-family: var(--b3-font-family);
        color: var(--b3-theme-on-background);
        background-color: var(--b3-theme-surface);
    }
    .prompt-overlay {
        display: none;
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-color: rgba(0, 0, 0, 0);*/
        background-color: var(--b3-mask-background);
        /*backdrop-filter: blur(3px);*/
    }
    .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: 4px 8px;
        line-height: 20px;
        margin-bottom: 10px;
        color: var(--b3-theme-on-background);
        transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
        background-color: var(--b3-theme-background);
        border: 0;
        border-radius: var(--b3-border-radius);
        box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
    }
    .prompt-dialog .prompt-input-container input[type="text"]:hover{
        box-shadow: inset 0 0 0 .6px var(--b3-theme-on-background);
    }
    .prompt-dialog .prompt-input-container input[type="text"]:focus{
        box-shadow: inset 0 0 0 1px var(--b3-theme-primary), 0 0 0 3px var(--b3-theme-primary-lightest);
    }
    .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;
        line-height: 20px;
        padding: 4px 12px;
        color: var(--b3-theme-primary);
        box-shadow: inset 0 0 0 .6px var(--b3-theme-primary);
        background-color: rgba(0, 0, 0, 0);
        transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
        border: 0;
        border-radius: var(--b3-border-radius);
    }
    .prompt-dialog button:focus, .prompt-dialog button:hover {
        background-color: var(--b3-theme-primary-lightest);
        box-shadow: inset 0 0 0 1px var(--b3-theme-primary);
        text-decoration: none;
    }
    @keyframes prompt-shake {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        25% { transform: translate(-50%, -50%) rotate(2deg); }
        50% { transform: translate(-50%, -50%) rotate(0deg); }
        75% { transform: translate(-50%, -50%) rotate(-2deg); }
        100% { transform: translate(-50%, -50%) rotate(0deg); }
    }
    .prompt-dialog.prompt-shake {
        animation: prompt-shake 0.5s ease-in-out;
    }
  `;
    // HTML模板
    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 overlay = document.createElement('div');
    overlay.className = 'prompt-overlay';
    document.body.appendChild(overlay);
    // 获取元素
    const promptContainer = document.querySelector(".prompt-input-container");
    const submitButton = document.getElementById('promptSubmit');
    const cancelButton = document.getElementById('promptCancel');
    const promptText = document.getElementById('promptText');
    let focusEl;
    // 弹出对话框
    function showPrompt(message = '', defaultValue = '', okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false) {
        return new Promise((resolve, reject) => {
            // 初始化窗口
            dialog.style.width = (width || 400) + 'px';
            promptText.textContent = message;
            let input = document.getElementById('promptInput');
            if(!input) {
                promptContainer.innerHTML = `<input type="text" id="promptInput" />`;
                input = document.getElementById('promptInput');
            }
            input.value = defaultValue || '';
            submitButton.textContent = okName || '确定';
            cancelButton.textContent = cancelName || '取消';
            if(!cancelName) cancelButton.style.display = 'none';
            dialog.style.display = 'block';
            if(modalMode) overlay.style.display = 'block';
            input.focus();
            focusEl = promptContainer.querySelector(":focus");
            // 监听按钮点击事件
            submitButton.addEventListener('click', () => {
                dialog.style.display = 'none';
                if(modalMode) overlay.style.display = 'none';
                document.removeEventListener('keydown', handleKeydown);
                resolve(input.value);
            });
            cancelButton.addEventListener('click', () => {
                dialog.style.display = 'none';
                if(modalMode) overlay.style.display = 'none';
                document.removeEventListener('keydown', handleKeydown);
                resolve(null);
            });
            // 添加键盘事件监听器
            const handleKeydown = () => {
                if (event.key === 'Escape') {
                    cancelButton.click();
                } else if (event.key === 'Enter') {
                    submitButton.click();
                }
            };
            document.addEventListener('keydown', handleKeydown);
            // 监听焦点事件，focus冒泡必须第三参数是true
            promptContainer.addEventListener('focus', (event) => {
                focusEl = event.target;
            }, true);
            // 添加点击遮罩层关闭对话框的功能
            if(modalMode){
                overlay.addEventListener('click', () => {
                    // 点击遮罩层关闭弹窗
                    if(clickOverlayClose) cancelButton.click();
                    // 重新获取焦点
                    if(focusEl) focusEl.focus();
                    // 添加抖动类
                    dialog.classList.add('prompt-shake');
                    // 移除抖动类
                    setTimeout(() => {
                        dialog.classList.remove('prompt-shake');
                    }, 500);
                });
            }
        });
    }
    // 弹出对话框表单
    function showPromptForm(message = '', html = '', onSubmit = null, onOpen = null, okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false) {
        return new Promise((resolve, reject) => {
            // 初始化窗口
            dialog.style.width = (width || 400) + 'px';
            if(html) promptContainer.innerHTML = html;
            promptText.textContent = message;
            submitButton.textContent = okName || '确定';
            cancelButton.textContent = cancelName || '取消';
            if(!cancelName) cancelButton.style.display = 'none';
            dialog.style.display = 'block';
            if(modalMode) overlay.style.display = 'block';
            if(typeof onOpen === 'function') onOpen(promptContainer);
            focusEl = promptContainer.querySelector(":focus");
            // 监听按钮点击事件
            submitButton.addEventListener('click', () => {
                dialog.style.display = 'none';
                if(modalMode) overlay.style.display = 'none';
                document.removeEventListener('keydown', handleKeydown);
                if(typeof onSubmit === 'function') {
                    resolve(onSubmit(promptContainer));
                } else {
                    resolve(undefined);
                }
            });
            cancelButton.addEventListener('click', () => {
                dialog.style.display = 'none';
                if(modalMode) overlay.style.display = 'none';
                document.removeEventListener('keydown', handleKeydown);
                resolve(null);
            });
            // 添加键盘事件监听器
            const handleKeydown = () => {
                if (event.key === 'Escape') {
                    cancelButton.click();
                } else if (event.key === 'Enter') {
                    submitButton.click();
                }
            };
            document.addEventListener('keydown', handleKeydown);
            // 监听焦点事件，focus冒泡必须第三参数是true
            promptContainer.addEventListener('focus', (event) => {
                focusEl = event.target;
            }, true);
            // 添加点击遮罩层关闭对话框的功能
            if(modalMode){
                overlay.addEventListener('click', () => {
                    // 点击遮罩层关闭弹窗
                    if(clickOverlayClose) cancelButton.click();
                    // 重新获取焦点
                    if(focusEl) focusEl.focus();
                    // 添加抖动类
                    dialog.classList.add('prompt-shake');
                    // 移除抖动类
                    setTimeout(() => {
                        dialog.classList.remove('prompt-shake');
                    }, 500);
                });
            }
        });
    }

    // 输出到全局变量
    window.showPrompt = showPrompt;
    window.showPromptForm = showPromptForm;
})();

注意事项

showPrompt 和 showPromptForm 的区别，见上面的效果图，上面一个是 showPrompt，这个是对 window.prompt 的模拟，下面一个是 showPromptForm，是对 showPrompt 的扩展，可以用于实现复杂的表单功能。
默认使用模态模式，如果不使用模态（即不使用遮罩层），调用时把 modalMode 参数设置为 false 即可。
模态窗口的背景色默认和思源保持一致，如果你想修改背景色，可以修改样式.prompt-overlay 的 background-color: var(--b3-mask-background); 这行代码。
模态窗口的宽度默认是 400px，如果想自定义宽度可通过 width 参数设置。
如果想支持 点击遮罩层关闭对话框的功能，把 clickOverlayClose 参数设置为 true 即可。
点确认按钮返回值是字符串，点取消返回值是 null，但 showPromptForm，点确定的返回值是自己定义的。
按钮文字可通过 cancelName 和 okName 参数设置。
更多功能请参考源码。

思源笔记

思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

融合块、大纲和双向链接，重构你的思维。
26822 引用 • 111820 回帖
教程

144 引用 • 634 回帖 • 8 关注
代码

470 引用 • 591 回帖 • 9 关注
JavaScript

JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。
731 引用 • 1284 回帖

3 操作

wilsons 在 2024-08-16 13:36:41 更新了该帖

wilsons 在 2024-08-16 09:41:46 更新了该帖

wilsons 在 2024-08-15 18:58:57 更新了该帖

wilsons 11 个月前

1 感谢

5 收藏

1 赞同

3 操作

2 回帖

402 106 8 170 5 112

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册关于

请输入回帖内容 ...

vincents • 11 个月前

感谢大佬分享 👍 ，下面这样也可以，要安装 open-api 插件，不过简单调用还是你这个方便些。


const dialog = new openAPI.siyuan.Dialog({
    title: '这里是标题',
    content: `
    <div class="b3-dialog__content">
        <div class="ft__breakword">
            <input type="text" id="ArticleTitle" class="b3-text-field fn__block" style="height: 100%;margin-bottom: 20px;" placeholder='输入标题'>
            <textarea id="ArticleContent" class="b3-text-field fn__block" style="height: 100%;" placeholder='输入内容'></textarea>
        </div>
        <div class="b3-dialog__action" style="padding-right: 0;padding-top: 12px;">
            <button class="b3-button b3-button--cancel" id="CancelBtn">取消</button><div class="fn__space"></div>
            <button class="b3-button b3-button--text" id="ConfirmBtn">确定</button>
        </div>
    </div>
    `,
    width: "500px",
    height: "220px"
});
dialog.element.querySelector("#ArticleTitle").focus();
dialog.element.querySelector("#CancelBtn").addEventListener("click", () => {
    console.log('cancel');
    dialog.destroy();
});
dialog.element.querySelector("#ConfirmBtn").addEventListener("click", () => {
    console.log('confirm');
    console.log(dialog.element.querySelector("#ArticleTitle").value);
    console.log(dialog.element.querySelector("#ArticleContent").value);
    dialog.destroy();
});

1 回复

wilsons • 11 个月前

付费者捐赠者作者

感谢分享！

我应该把 prompt api 定义罗列下，这样看起来更清晰


// 弹出prompt对话框
// 参数说明
// message 提示消息，类似标题
// defaultValue 输入框默认值
// okName 确认按钮名字
// cancelName 取消按钮名字
// width对话框宽度，默认400，高度根据内容自适应
// modalMode，是否模态窗口，模态窗口，除了当前对话框，其他地方无法点击，false非模态窗，true模态窗
// clickOverlayClose 是否点击遮罩层关闭对话框，仅在模态窗口下有效
function showPrompt(message = '', defaultValue = '', okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false);

// 弹出自定义prompt对话框
// 参数说明
// message 提示消息，类似标题
// html 对话框自定义表单内容的HTML代码
// onSubmit 提交时的回调函数，对话框的返回值依赖于这个回调函数的返回值
// onOpen 打开窗口时的回调函数，可以在打开窗口话进行一些初始化操作，比如某个输入框设为焦点
// okName 确认按钮名字
// cancelName 取消按钮名字
// width 对话框宽度，默认400px，高度根据内容自适应
// modalMode，是否模态窗口，模态窗口，除了当前对话框，其他地方无法点击，false非模态窗，true模态窗
// clickOverlayClose 是否点击遮罩层关闭对话框，仅在模态窗口下有效
function showPromptForm(message = '', html = '', onSubmit = null, onOpen = null, okName="确定", cancelName="取消", width=400, modalMode=true, clickOverlayClose=false);

wilsons

正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦！💖 想催更、提需求？欢迎访问 👉 https://afdian.com/a/wilsons

回帖

1772

帖子

积分

72021

js 代码片段模拟 window.prompt 函数

相关帖子

思源笔记 S3 云同步傻瓜式教程

思源 Chart 萌新使用指南

思源笔记 docker 私有化 +alist 图床 + 七牛云 S3 备份方案分享

【萌新教程】思源笔记使用七牛云 KODO 配置 S3 同步，超详细！

国内服务器部署 Stable Video Diffusion 教程

想省大钱？思源笔记第三方同步 S3 手把手教程（使用七牛云对象存储 Kodo）（2024.4.25）

第四课账号搭建与内容执行

欢迎来到这里！

近期热议

推荐标签标签

最新标签

js 代码片段模拟 window.prompt 函数

相关帖子

思源笔记 S3 云同步傻瓜式教程

思源 Chart 萌新使用指南

思源笔记 docker 私有化 +alist 图床 + 七牛云 S3 备份方案分享

【萌新教程】思源笔记使用七牛云 KODO 配置 S3 同步，超详细！

国内服务器部署 Stable Video Diffusion 教程

想省大钱？思源笔记第三方同步 S3 手把手教程（使用七牛云对象存储 Kodo）（2024.4.25）

第四课 账号搭建与内容执行

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

第四课账号搭建与内容执行

推荐标签标签