H5剪切板功能

Developer 发布于2019-08-22 18:20 / 3074人阅读

摘要：复制内容到剪贴板插件官网地址引用方式默认是截取中的的属性值截取输入框中的值里面还有很多高级用法可以前往官网逻辑更多细节官网框架提供的剪切板插件

      最近使用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

专线服务混合云剪切板 python写剪切板 linux清除剪切板 js复制到剪切板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95750.html

剪切板粘贴上传图片功能的javascript实现

摘要：平时的开发中我们难免要上传一些网页截图图片等，传统的选择文件上传使用起来不方便，这里介绍一种使用和实现的剪切板黏贴上传图片功能。剪切板中图片的获取与上传通过，我们可以以的形式获取到剪切板中的图片，然后将数据作为参数通过的方式传输到服务器端。平时的开发中我们难免要上传一些网页截图、图片等，传统的选择文件上传使用起来不方便，这里介绍一种使用js和node实现的剪切板黏贴上传图片功能。当我...

anyway 2019-08-19 18:17 评论0 收藏0
H5复制粘贴双端适配的解决方案（终极版）

摘要：前言最终适配所有机型的方案基于官网这个库由几个不同的提供商托管。提供的复制失败的方法，进行复制失败提示复制失败请手动选择复制。上其他相关分享使用实现前端页面复制到粘贴板的功能中配合实现点击按钮复制内容到剪切板前言最终适配所有机型的方案基于clipboardjs官网https://clipboardjs.com/ 这个库由几个不同的CDN提供商托管。选择你最喜欢的：）建议使用 v...

keithyau 2019-08-22 16:10 评论0 收藏0
js获取剪切板内容，js控制图片粘贴。

摘要：在用户执行粘贴操作的时候，能够获得剪切板的内容，本文讨论一下这个问题。目前只有支持获取剪切板中的图片数据。这么多的判断条件，基本可以确定通过剪切板过来的是粘贴的文件。在用户执行粘贴操作的时候，js能够获得剪切板的内容，本文讨论一下这个问题。目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari，一些Chrome的新特性是可以尽情使...

KaltZK 2019-08-19 17:22 评论0 收藏0