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

薄洪涛7年前JS1508

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


这里使用到一款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搭建基于融云的聊天室

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

JS浅拷贝导致的聊天信息丢失问题

JS浅拷贝导致的聊天信息丢失问题

问题背景我们做了一个基于vue的H5在线问诊项目,集成了融云IM,每次进入到会话页面的时候,需要恢复历史聊天数据,我们的历史聊天数据做了三层缓存,内存-->浏览器缓存(LocalStorage)...

vue如何在移动端调试

vue如何在移动端调试

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

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

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

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

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

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

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

vue2.0搭建vue脚手架

vue2.0搭建vue脚手架

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

发表评论    

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