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

薄洪涛6年前JS1360

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


这里使用到一款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


相关文章

JsonP跨域请求详解

JsonP跨域请求详解

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

融云搭建IM在安卓微信浏览器无法播放声音

融云搭建IM在安卓微信浏览器无法播放声音

之前我们做了一个在线问诊的项目,基于融云和VUE搭建,在聊天的时候,接收到语音消息进行播放的时候,出了点问题,在安卓的微信浏览器上无法播放,在ios上却可以然后我使用了微信开发者工具,打开了页面,发现...

vue2.0搭建vue脚手架

vue2.0搭建vue脚手架

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

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

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

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

node学习及小爬虫的实现

node学习及小爬虫的实现

菜鸟一只,抽空了解了下node,然后总结下学到的重点;首先是安装nodejs,需要安装的版本最好是v6.0以上,不然有些特性不兼容nmp是和nodeJS一起安装的一个管理包工具,类似于python的p...

vue如何在移动端调试

vue如何在移动端调试

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

发表评论    

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