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

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

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

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

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

效果

Snipaste20240816091141.png

Snipaste20240816091253.png

接口定义如下

// 弹出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; })();

注意事项

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

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

    融合块、大纲和双向链接,重构你的思维。

    26401 引用 • 109791 回帖 • 2 关注
  • 教程
    144 引用 • 629 回帖 • 8 关注
  • 代码
    470 引用 • 591 回帖 • 9 关注
  • JavaScript

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

    730 引用 • 1284 回帖
3 操作
wilsons 在 2024-08-16 13:36:41 更新了该帖
wilsons 在 2024-08-16 09:41:46 更新了该帖
wilsons 在 2024-08-15 18:58:57 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • vincents

    感谢大佬分享 👍 ,下面这样也可以,要安装 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(); });

    dialogdemo.png

    1 回复
  • wilsons

    感谢分享!

    我应该把 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

推荐标签 标签

  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10160 引用 • 46160 回帖 • 63 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 640 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • 印象笔记
    3 引用 • 16 回帖
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 1 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 546 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 642 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 9 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 12 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖 • 2 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 633 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 2 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 713 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 1 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 280 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 9 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖