html5页面如何实现点击复制的功能

这篇文章主要介绍了html5页面如何实现点击复制的功能，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联，为您提供成都网站建设、成都网站制作、网站营销推广、网站开发设计，对服务成都服务器托管等多个行业拥有丰富的网站建设及推广经验。创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用clipboard插件来实现。以下是一个简单的demo。

首先可以通过npm install clipboard --save-dev 来安装该插件

    
    
    



从属性里复制


    复制到剪切板-111



从另外一个元素复制内容
222-从另外一个元素复制内容
复制到剪切板-222


JS里指定复制的内容
复制到剪切板-333

效果图：

点击完复制按钮后，成功回调函数就会输出一个对象，该对象包含了复制的内容等信息。这个时候，在其他输入文字的地方使用粘贴快捷键就可以把剪切板的内容粘贴到你需要的地方了。

感谢你能够认真阅读完这篇文章，希望小编分享html5页面如何实现点击复制的功能内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!