iclipboard: 一个更好用的复制文本到剪贴板的 npm 包

AlienZHOU 发布于2019-08-23 12:41 / 2048人阅读

摘要：最近开发遇到一个需求要把一串文字复制到剪贴板然后就看了下发现了一个多的库想都没想就拉来用了结果发现这货真特么不是一般的难用特别是和或者绑定的时候简直不想吐槽所以造了个用起来更舒服并且体积更小没有依赖的库来节省时间这个库的名字叫你可以在上找到

最近开发遇到一个需求, 要把一串文字复制到剪贴板, 然后就看了下 github, 发现了一个 star 2W 多的库 clipboard, 想都没想就拉来用了, 结果发现这货真特么不是一般的难用, 特别是和 react 或者 vue 绑定的时候, 简直不想吐槽.

所以造了个用起来更舒服, 并且体积更小, 没有依赖的库来节省时间.

这个库的名字叫 iclipboard.

你可以在 npm 上找到它: http://npmjs.com/package/icli....

或者在 GitHub 上查看源代码: https://github.com/acrazing/i....

使用教程

安装: npm 或者 yarn 都可以

npm install -S iclipboard
yarn add iclipboard

使用: 这个库只提供了一个接口: copy(text): boolean, 使用的时候只需要调用这个函数就 ok:

import { copy } from "iclipboard"

copy("你想要的字符串")

但是需要注意: 复制粘贴操作浏览器限定只能是在用户交互的时候发生, 因此一定是在某个元素的click或者其它事件回调中同步调用, 所以完整的代码看起来大概长成这样子:

import { copy } from "iclipboard"

const button = document.getElementById("button-id")
button.addEventListener("click", () => {
    if(copy("Hello world!")) {
        alert("复制成功")
    } else {
        alert("复制失败")
    }
})

在 React 中调用也是一样:

import React from "react"
import { copy } from "iclipboard"

class App extends React.Component {
    handleClick = () => {
        if(copy("Hello world!")) {
            alert("复制成功")
        } else {
            alert("复制失败")
        }
    }
    
    render() {
        return 
    }
}

GPU云服务器云服务器 js复制到剪贴板每周数百万下载量!NPM包修复了一个远程将安装包复制到云服务器云服务器复制到另外一个云服务器

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

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

[译] 复制文本到剪切板的clipboard.js使用方法

摘要：为什么复制文本到剪贴板应该不难。在内部我们需要获取所有匹配的元素选择器并且为它们每一个添加上事件侦听器。因为这个原因我们使用事件代理通过一个侦听器取代了多个事件监听器。从另一个元素复制文本常见的用例是复制另一个元素的内容。工作中需要使用到的一个复制插件，使用简单兼容性还行，因为没找到中文版介绍就自己翻译一下，水平有限，不一定全按文章走，如果有问题欢迎指正！！为了更加直观的展示用法,略...

itvincent 2019-08-26 10:29 评论0 收藏0
移动端复制文本clipboard 以及针对iOS的处理

摘要：如果有这样的需求点击一个按钮，复制某个文本的文字到剪贴板以供使用，我们就需要用到一些方法。在上我们复制文本可以使用但是在移动端是不行的。我选用的方案是，实测效果完美。地址我以举例这是我们想要复制的文字复制文案复制成功复制失败如果有这样的需求：点击一个按钮，复制某个文本的文字到剪贴板以供使用，我们就需要用到一些方法。在pc上我们复制文本可以使用 document.execCommand...

cppprimer 2019-08-23 14:35 评论0 收藏0
DOM中剪贴板控制与剪贴板劫持攻击提醒

摘要：直到的到来，将剪贴板相关事件纳入了规范。但是，在和中，只有在处理剪贴板事件期间，对象才有效，这是为了防止对剪贴板的未授权访问在中，则可以随时访问对象。本部分系列文章Github Repo Introduction Clipboard API HTML5实战与剖析之剪贴板事件 showImg(https://segmentfault.com/img/remote/14600000067...

lemanli 2019-08-19 18:23 评论0 收藏0
Web聊天工具的富文本输入框

摘要：由于我们的富文本输入框比较简单，所以只需要处理两类数据即可，其一是普通的文本类型数据，包括表情其二则是图片类型数据。最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。仓库地址：chat-input-box预览地址：https://codepen.io...

iKcamp 2019-08-23 15:36 评论0 收藏0