Electron 剪贴板事件

发布于 2021-06-20 13:01:15 字数 1380 浏览 1481 评论 0

在开发中我们经常会遇到给用户一个激活码,然后让用户复制粘贴的情况,这时候就需要用到 clipboard 模块,也就是我们的剪贴板模块。

复制激活码功能实现,现在要作一个激活码,然后旁边放一个按钮,点击按钮就可以复制这个激活码,你可以把激活码复制到任何地方。

先新建一个页面 demo7.html,然后在里边先写相关的html代码。再里边放入一个文字的激活码,然后放入一个按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        激活码:<span id="code">jspangcom1234234242</span> <button id="btn">复制激活码</button>
    </div>
</body>
</html>

然后编写 <script> 标签,首先分本获取 <span> 标签的DOM,然后再获取 <button> 的DOM,然后点击button时,触发事件,把内容复制到剪贴板中。代码如下:

<script>
    const {clipboard} = require('electron')
    const code = document.getElementById('code')
    const btn = document.getElementById('btn')
    btn.onclick = function(){
        clipboard.writeText(code.innerHTML)
        alert('复制成功')
    }
</script>

这时候就可以进行预览了,如果提示你的 require 没找到,记得在 main.js 中加入这句话。

mainWindow = new BrowserWindow({
    width:800,
    height:600,
    webPreferences:{ nodeIntegration:true}
})

这个在前面讲过,这个就是允许你在 Electron 中使用 node,现在就应该可以了。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文