您现在的位置是：网站首页> 编程资料编程资料

Html5剪切板功能的实现代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2023-10-16 290人已围观

简介本篇文章主要介绍了Html5剪切板功能的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况：

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

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

被复制的内容

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

用于复制input，textarea中的文本

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

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

引用方式：
NPM npm install --save clipboardCDN

里面还有很多高级用法,可以前往官网逻辑更多细节 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

Sample2

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。