Html5剪切板功能的实现方法
这篇文章主要介绍了Html5剪切板功能的实现方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
成都创新互联专业为企业提供田家庵网站建设、田家庵做网站、田家庵网站设计、田家庵网站制作等企业网站建设、网页设计与制作、田家庵企业网站模板建站服务,10多年田家庵做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴,然后发送到pc端,在电脑上进行打开。所有搜集找到了一下几种情况:
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
Sample2
感谢你能够认真阅读完这篇文章,希望小编分享Html5剪切板功能的实现方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
新闻名称:Html5剪切板功能的实现方法
URL网址:http://pwwzsj.com/article/jjpcho.html