js实现将文本复制到剪贴板的现代方法

资源

推荐使用:clipboard.js

官方教程地址:https://clipboardjs.com/#example-text

官方github地址:https://github.com/zenorocha/clipboard.js/

基本用法解答

1、data-clipboard-target  在触发器元素中添加属性来实现

new ClipboardJS(‘.btn‘)

<input id="foo" value="我是被copy的值">

<button class="btn" data-clipboard-target="#foo"></button>

2、data-clipboard-action属性以指定是要copy还是cut内容

new ClipboardJS(‘.btn‘)

<textarea id="bar">我是被copy或者cut的内容</textarea>

<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"></button>

3、data-clipboard-text在触发器元素中包含一个属性

new ClipboardJS(‘.btn‘)

<button class="btn" data-clipboard-text="我是被copy的值"></button>

4、更多高级用法请参考官方文档:https://clipboardjs.com/#example-text

原文地址:https://www.cnblogs.com/qiaduan/p/10250424.html

时间: 2024-11-13 06:58:46

js实现将文本复制到剪贴板的现代方法的相关文章

JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可以实现,但是面对我自啊table的td中存在多个要实现粘贴复制的话,就会有问题了. 所以,才找了现在这个jqery的另一个插件,相对更好些,能够支持移动端的 ### 插件官网:https://clipboardjs.com/ 实现起来也很简单, 我就弄个例子: <!DOCTYPE html> &l

js插件zClip实现复制到剪贴板功能

之前在一个项目中用过插件,但是最近又要做,发现,出现问题了,根据以往记忆做好,检查了所有问题,还是不出现,元素是绑定了zclip_type这个事件,就是弹出不显示,想了下,查看html结构元素一看,问题发现,覆盖的层定位有问题.相对body定位了,没有相对td定位. 一,准备工作. 准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址

js点击后将文字复制到剪贴板,将图片复制到剪贴板

复制文字: [html] view plaincopy <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color: white;"><s:text name

浏览器里点击复制到剪贴板的小方法

今天分享一个在浏览器里点击复制到剪贴板的小方法,经测试所有浏览器都没有兼容性问题,包括安卓和iOS,拿走不谢! 类似于这种需求: 现成的代码: function copy() {    const input = document.createElement('input');    input.value = '想要复制的内容';    document.body.appendChild(input);    input.select();    if (document.execComman

复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案.而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能.包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c.如下: 对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦.因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能.今天介绍一个实

使用JavaScript读取所选文本并将其复制到剪贴板

询问大多数开发人员如何将用户选择的内容复制到剪贴板,他们会提到Flash的需求(因此Zeroclipboard等脚本的流行 ).然而,这种想法的调整现在归功于最近浏览器对JavaScript中关键技术的支持的改进,这使得复制到剪贴板本身成为可能.这种JavaScript方法在IE9 +,Firefox 41+和Chrome 42+中得到支持,最终为浏览器本身带来了原生剪切/复制支持.在本教程中,我们将看到如何阅读用户选择的文本内容,动态选择页面上的一些文本,最后但并非最不重要的是,将所选内容复制

Android 复制 粘贴 剪贴板的使用 ClipboardManager

Copy and Paste 版本:Android 4.0 r1 快速查看 用于复制粘贴数据的基于剪贴板的框架. 同时支持简单和复杂的数据,包括文本串.复杂的数据结构.文本和二进制流数据.程序 asset. 直接从剪贴板复制粘贴简单文本. 用content provider复制粘贴复杂数据. 需要API 11版本. 在本文中 剪贴板框架 剪贴板类 ClipboardManager ClipData.ClipDescription和ClipData.Item ClipData常用方法 将剪贴板中数

点击复制到剪贴板的方法( clipboard )

需求描述:点击复制可以把店铺链接复制到剪贴板上 解决方法: 使用clipboard 插件 安装 npm install clipboard --save 设置 在main.js 中引入, 当然我们也可以在用到的.vue中映入,因为不止在一个地方中用到了拷贝文字 import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard; 在需要拷贝文字的文件里面 <template> <div clas

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能