怎么在Html5中实现一个剪切板功能

这期内容当中小编将会给大家带来有关怎么在Html5中实现一个剪切板功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

公司主营业务：网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出南部免费做网站回馈大家。

1.不带input输入框的原生js方法

这种情况适用于复制非输入框中的文本到剪切板

 被复制的内容
     点击复制

     

2.带输入框的原生js方法

用于复制input，textarea中的文本

 

    复制输入框中内容
    

这种方法也可以进行延深，充当和方法1一样的用途。动态创建一个input输入框，将其内容置为想复制的内容，最后在将其移除或者隐藏即可。

3.js复制内容到剪贴板插件（clipboard.js）

clipboard.js官网
clipboard.js cdn地址

引用方式：
NPM   npm install --save clipboard
CDN  

里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网

4. Vue框架提供的剪切板插件    vue-clipboard2

import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    VueClipboard.config.autoSetContainer = true // add this line
    Vue.use(VueClipboard)

Sample1