Html5剪切板功能的实现方法-成都快上网建站

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剪切板功能的实现方法
链接地址:http://kswjz.com/article/jjpcho.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流