GVKun编程网logo

js 插件实现一键复制功能（js 插件实现一键复制功能的方法）

7

在本文中，我们将给您介绍关于js插件实现一键复制功能的详细内容，并且为您解答js插件实现一键复制功能的方法的相关问题，此外，我们还将为您提供关于clipboard.js一个可以在移动端一键复制的插件、

在本文中，我们将给您介绍关于js 插件实现一键复制功能的详细内容，并且为您解答js 插件实现一键复制功能的方法的相关问题，此外，我们还将为您提供关于clipboard.js一个可以在移动端一键复制的插件、clipboard.js实现复制功能、cocos2dx 实现文字的一键复制功能（IOS、Android）、h5实现一键复制到粘贴板 兼容iOS的知识。

本文目录一览：

js 插件实现一键复制功能（js 插件实现一键复制功能的方法）

js 插件实现一键复制功能（js 插件实现一键复制功能的方法）

clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能。

使用方法：

　　1. 下载 clipboard.js，并在页面中引入该插件。clipboard.js 下载地址： https://github.com/zenorocha/clipboard.js

<script src="js/clipbaord.js"></script>

　　2. 需要复制的目标文本

<span id="tar_text" >我是一段需要被复制的文本</span>

　　3. 复制按钮（注：此处需要给触发复制时间的按钮添加两个属性，data-clipboard-action 及 data-clipboard-target，data-clipboard-target 的属性值为目标文本的 id 值）

 <button  id="copy" data-clipboard-action="copy" data-clipboard-target="#tar_text">Copy My Invitation Address</button>

　　4. 实例化 Clipboard 对象

复制代码 
　　var clipboard = new Clipboard(''#copy'');
   clipboard.on(''success'', function (e) {
        alert("复制成功！");
   });
   clipboard.on(''error'', function (e) {
        alert("对不起，您的浏览器暂不支持一键复制功能！");
   });

clipboard.js一个可以在移动端一键复制的插件

clipboard.js一个可以在移动端一键复制的插件

网址：https://clipboardjs.com/

使用方法：

1、引入js <script src="dist/clipboard.min.js"></script>

2、每一个需要复制或者操作的元素都需要new一个实例

3、三种方式实现复制

  • 复制input元素里内容，input不能隐藏，type不能设置为hidden，否则无效
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button style="width:100px;height:50px" value="复制" data-clipboard-target="#foo">
</button>
var copyBtn= new ClipboardJS(''.btn'');

 

  • 直接将需要复制的元素写在button 中 
    <button class="btn" data-clipboard-text="需要复制的内容">
    复制
</button>
    var copyBtn= new ClipboardJS(''.btn'');

     

  • 写在代码中

　　　

<button class="btn" aria-label="需要复制的内容">
    复制
</button>

 

var copyBtn= new ClipboardJS(''.btn'', {
    text: function (trigger) {
        return trigger.getAttribute(''aria-label'');
    }
});

 

iphone只支持safari10+，有些移动端使用方式1,2无效时，可试试方式3

clipboard.js实现复制功能

clipboard.js实现复制功能


项目地址：https://github.com/zenorocha/clipboard.js

 

Build Status
Killing Flash

现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。

Demo

为什么使用它

复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的文件。最重要的是，它不应该依赖 Flash 或其他臃肿的框架。

这是 clipboard.js 诞生的原因。

安装

你可以通过 npm 来安装它。

npm install clipboard --save

如果你不使用包管理，仅需要下载一个 ZIP 文件。

开始

首先，引入位于 dist 目录下的脚本文件，或者引入一个第三方CDN。

<script src="dist/clipboard.min.js"></script>

然后，你需要通过传入一个DOM 选择器, HTML 元素, 或者 HTML 元素数组作为参数，来实例化对象。

new Clipboard(''.btn'');

本质上，我们需要获取所有选择器匹配到的元素，并为每一个选择器设置监听事件。但仔细想想，如果有成百上千个匹配到的元素，这样做会耗费大量内存。

因此，我们使用事件代理，通过一个事件监听器来取代多个事件监听。毕竟，性能是问题。

使用

我们正在经历一场声明式的复兴，这就是为什么我们决定利用 HTML5 data 属性 来提高可用性的原因。

从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。

这个属性的值就是能匹配到另一个元素的选择器。

example-2

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

从另一个元素剪切文本

此外，你可以定义一个 data-clipboard-action 属性来指明你想要复制（copy）还是剪切（cut）内容。

如果你省略这个属性，则默认为复制（copy）。

example-3

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>

正如你所预料的，剪切（cut）动作只在 <input> 或 <textarea> 元素起作用。

从属性复制文本

事实上，你甚至不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了。

example-1

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn''t mean you should — clipboard.js"> Copy to clipboard </button>

事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。

我们通过触发自定义事件，例如 success 和 error，让你可以设置监听并实现自定义逻辑。

var clipboard = new Clipboard(''.btn'');

clipboard.on(''success'', function(e) { console.info(''Action:'', e.action); console.info(''Text:'', e.text); console.info(''Trigger:'', e.trigger); e.clearSelection(); }); clipboard.on(''error'', function(e) { console.error(''Action:'', e.action); console.error(''Trigger:'', e.trigger); });

你可以访问这个网站，打开控制台，查看演示示例。

工具提示（Tooltips）

每个应用有着不同的设计需求，这是为什么 clipboard.js 没有包含任何 CSS 或内置的工具提示解决方案。

你在示例网站看到的工具提示是通过 GitHub''s Primer 构建的。如果你正在寻找一个外观和体验类似的库，你可以去看看这个项目。

高级选项

如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如，如果你希望动态设置 target，你需要返回一个节点（Node）.

new Clipboard(''.btn'', {
    target: function(trigger) { return trigger.nextElementSibling; } });

如果你希望动态设置 text，你需要返回一个字符串。

new Clipboard(''.btn'', {
    text: function(trigger) { return trigger.getAttribute(''aria-label''); } });

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container 属性的值。

new Clipboard(''.btn'', {
    container: document.getElementById(''modal'') });

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

var clipboard = new Clipboard(''.btn'');
clipboard.destroy();

浏览器支持

这个库依赖于 Selection 和 execCommand 的 API。前者 兼容所有的浏览器，后者兼容以下浏览器。

Chrome logo Edge logo Firefox logo Internet Explorer logo Opera logo Safari logo
42+ ✔ 12+ ✔ 41+ ✔ 9+ ✔ 29+ ✔ 10+ ✔

好消息是，如果你需要支持旧浏览器，clipboard.js 可以优雅降级。你所要做的就是在 success 事件触发时提示用户“已复制！”，error 事件触发时提示用户“按 Ctrl+C 复制文字”（此时用户要复制的文字已经选择了）。

你也可以通过运行 Clipboard.isSupported() 来检查浏览器是否支持 clipboard.js，如果不支持，你可以隐藏复制/剪切按钮。

福利

一个浏览器拓展程序，可以添加一个“复制到剪切板”按钮到所有的代码块，支持 GitHub，MDN，Gist，StackOverflow，StackExchange，npm，甚至 Medium。

安装：谷歌浏览器、火狐浏览器。

协议

MIT 协议 © Zeno Rocha

cocos2dx 实现文字的一键复制功能（IOS、Android）

cocos2dx 实现文字的一键复制功能（IOS、Android）

1、IOS篇（用OC和C++混编）

头文件声明：

public static void copy(std::string str);

实现如下：

void copy(std::string str) {

//把string类型转换成为char*

char*p=(char*)str.data();

//把char*转换成OC的Nsstring

Nsstring *nsMessage= [[Nsstringalloc] initWithCString:pencoding:NSUTF8StringEncoding];

//获得iOS的剪切板

UIPasteboard *pasteboard = [UIPasteboardgeneralPasteboard];

//改变剪切板的内容

pasteboard.string = nsMessage;

}


2、Android篇

public void copy(final String str)

{

Runnable runnable = new Runnable() {
public void run() {
ClipboardManager mClipboardManager = (ClipboardManager)getSystemService(CLIPBOARD_SERVICE);
mClipboardManager.setText(str);
}
};
runOnUiThread(runnable);

}

h5实现一键复制到粘贴板 兼容iOS

h5实现一键复制到粘贴板 兼容iOS

效果展示

先贴上测试连接 http://cdn.foundao.com/zhaosheng/copytext
http://cdn.foundao.com/zhaosheng/copytext/code.png

实现原理

采用document.execCommand(''copy'')来实现复制到粘贴板功能

复制必须是选中input框的文字内容，然后执行document.execCommand(''copy'')命令实现复制功能。
初步实现方案（非完整代码）

// 此代码 在iOS下有bug,完整代码在最后贴出

const input = document.querySelector(''#copy-input'');
    if (input) {
      input.value = text;
      if (document.execCommand(''copy'')) {
        input.select();
        document.execCommand(''copy'');
        input.blur();
        alert(''已复制到粘贴板'');
      }
    }

兼容性问题

  1. input 输入框不能hidden或者display: none;
    如果需要隐藏输入框可以使用定位脱离文档流，然后移除屏幕
#copy-input{
position: absolute;
left: -1000px;
z-index: -1000;
}

2.ios下不能执行document.execCommand(''copy'')

在ios设备下alert(document.execCommand(''copy''))一直返回false
查阅相关资料发现ios下input不支持input.select();

因此拷贝的文字必须存在，不能为空字符串，不然也不会执行复制空字符串的功能

参考这篇博客实现了ios下复制的功能 https://blog.csdn.net/VLilyV/...

主要是使用textbox.createTextRange方法选中输入框的文字

// input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
  if (textbox.createTextRange) {//ie
    const range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart(''character'', startIndex);//起始光标
    range.moveEnd(''character'', stopIndex - startIndex);//结束光标
    range.select();//不兼容苹果
  } else {//firefox/chrome
    textbox.setSelectionRange(startIndex, stopIndex);
    textbox.focus();
  }
}

3.ios设备上复制会触发键盘弹出事件

给input加上readOnly只读属性

代码

踩完以上的坑，总结的代码如下
git地址 https://github.com/zhaosheng8...

  copyText = (text) => {
    // 数字没有 .length 不能执行selectText 需要转化成字符串
    const textString = text.toString();
    let input = document.querySelector(''#copy-input'');
    if (!input) {
      input = document.createElement(''input'');
      input.id = "copy-input";
      input.readOnly = "readOnly";        // 防止ios聚焦触发键盘事件
      input.style.position = "absolute";
      input.style.left = "-1000px";
      input.style.zIndex = "-1000";
      document.body.appendChild(input)
    }

    input.value = textString;
    // ios必须先选中文字且不支持 input.select();
    selectText(input, 0, textString.length);
    console.log(document.execCommand(''copy''), ''execCommand'');
    if (document.execCommand(''copy'')) {
      document.execCommand(''copy'');
      alert(''已复制到粘贴板'');
    }
    input.blur();

    // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
    function selectText(textbox, startIndex, stopIndex) {
      if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart(''character'', startIndex);//起始光标
        range.moveEnd(''character'', stopIndex - startIndex);//结束光标
        range.select();//不兼容苹果
      } else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
      }
    }
  };


// 复制文字

// 必须手动触发 点击事件或者其他事件，不能直接使用js调用！！！
copyText(''h5实现一键复制到粘贴板 兼容ios'')


/*兼容性补充：
 移动端：
 安卓手机：微信（chrome）和几个手机浏览器都可以用。 
 苹果手机：微信里面和sarafi浏览器里也都可以，  
 PC:sarafi版本必须在10.2以上，其他浏览器可以.
 兼容性测试网站：https://www.caniuse.com/
*/
        
 .

关于js 插件实现一键复制功能和js 插件实现一键复制功能的方法的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于clipboard.js一个可以在移动端一键复制的插件、clipboard.js实现复制功能、cocos2dx 实现文字的一键复制功能（IOS、Android）、h5实现一键复制到粘贴板 兼容iOS的相关知识，请在本站寻找。

本文标签：

上一篇[转帖] Docker 的 daemon.json 的作用（docker/daemon.json）

下一篇配置低的电脑取消 Eclipse 验证 js（取消eclipse校验）

相关文章