js复制Dom节点内容到系统剪切板

薄洪涛6年前JS1444

需求:密码生成器,生成后比较长的密码串,点击复制按钮,实现复制到系统剪切板;


这里使用到一款js插件:可以实现一键复制 https://github.com/zenorocha/clipboard.js/

引入:

<script src="static/js/clipboard.min.js"></script>

定制按钮:

<p>
    <div id="random_password">这里放要复制的内容</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#random_password" style="margin-left: 8px;">复制按钮</button>
</p>

js代码:

/*
 *  一键复制密码
 */
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});


点击按钮就可以实现text的复制了
之前的话做这个功能需要用flash,现在so easy


相关文章

vue如何在移动端调试

vue如何在移动端调试

    最近配合做vue的项目开发,我们前端遇到了一些问题,在调试android和ios样式兼容的时候,需要在手机上调试,但是又需要部署包发到服务器上,然后才能...

vue搭建基于融云的聊天室

    最近项目比较忙,在做完了一个在线问诊的项目后,想给大家分享下其中用到的,但是百度上资料又比较少的技术    需求...

vue2.0搭建vue脚手架

vue2.0搭建vue脚手架

最近有个项目,老大评估后想用前后端分离技术来做,借这个机会来熟悉下vue前端框架,这次就搭建一个vue项目,下一个目标就是把vue和yii2.0整合;开搞搭建node环境这步很简单,下载安装包右键安装...

ios textarea标签的placeholder属性多行时被隐藏

ios textarea标签的placeholder属性多行时被隐藏

我们使用的textarea 来做了病情描述,但是在ios手机上,当删除输入的文字后,placeholder显示不全,只有键盘收回的时候,才可以显示,如下图导致的原因目前不明确,但是百度上说有可能是以下...

这不是真的ES6之ECMAScript 6

这不是真的ES6之ECMAScript 6

最新想学习es6(elasticsearch6),在我的破服务器(512m内存)上搭建了java虚拟机(JVM)环境,首先说明一点,买服务器还是要买高配呀,如图当我安装elasticsearch看到内...

JsonP跨域请求详解

JsonP跨域请求详解

先来了解一下基本的概念,什么叫做跨域?举个例子,在localhost:8080上有一个ajax请求,代码如下<script src="js/jquery-1.7.2.js&q...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。