惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

雷峰网
雷峰网
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
Google DeepMind News
Google DeepMind News
V
V2EX
T
The Blog of Author Tim Ferriss
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Hugging Face - Blog
Hugging Face - Blog
Stack Overflow Blog
Stack Overflow Blog
I
InfoQ
博客园_首页
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Last Week in AI
Last Week in AI
Recent Announcements
Recent Announcements
Vercel News
Vercel News
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tailwind CSS Blog
美团技术团队
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
Blog — PlanetScale
Blog — PlanetScale
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
J
Java Code Geeks

碎言

不懂就别瞎掰掰:【程序员的常识】写的什么玩意? AI 辅助编程下的程序设计与代码编写 使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用 探索编程新境界:MarsCode 助你一臂之力 使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel AI 辅助编程:免费工具的优缺点及官网一览 GitHub push更新总是失败,写个python脚本解决 把博客从GitHub迁移到到了vercel ComfyUI 和 Flux.1 安装与使用教程 Flux.1 入门必知:硬件、环境、模型 Git项目的子文件夹中的内容无法同步到远程仓库的解决方法 blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法 博客聚合网站:积薪,竟然关闭了! blender日常使用中的一些技巧 虽然只有我自己在用,但还是更新了碎言博客的源代码, 与其在迷茫中困惑,不如在努力中前进 差点忘了我还有一个博客... 秧歌、博客和AI 终于熬到了新手上路 好久没有更新博客了。。。 老妈大腿骨骨折,最近一直在医院护理 Hello, September! Ubuntu开机自动启动Docker容器运行WordPress Docker 简单快速安装部署WordPress Docker下安装MySQL 加碘盐能防核辐射的话,还怕什么核战争? shields.io 一个简洁、一致、清晰的徽章 Ubuntu下使用root登录ssh的设置 GitHub Actions 构建、部署 Next.js项目 我又用回了"IE"--edge
clipboard.js 一款简单好用的将文本复制到剪贴板的现代方法
J.sky · 2023-06-09 · via 碎言

复制文本到剪贴板本应该不难。它不应该需要配置的繁琐步骤或大量的加载空间。最重要的是,它不应该依赖于Flash或任何臃肿的框架。

简介

今天开发的时候遇到一个功能,就是把浏览器input组件中的文本复制到剪贴板,当时大概觉得应该会有现成的库类,所以一搜索,就搜到了:clipboard.jsclipboard.js 是一个轻量级的 JavaScript 库,用于简化在网页中执行复制操作到剪贴板的过程。它没有依赖于任何第三方库或插件,仅仅使用原生的JavaScript。

使用 clipboard.js,您可以通过几行代码实现将文本、HTML 或其他数据复制到剪贴板。它提供了一种简单而一致的方式来处理跨浏览器的剪贴板操作,避免了处理各种浏览器兼容性问题的烦恼。

使用方法

  1. 引入CDN:

  2. 绑定按钮的DOM:

    new ClipboardJS(‘.btn’);

  3. HTML代码:

复制input中的字符:

<!-- 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>

复制textarea中的字符:

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

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

嗯,就是这么简单,不要重复造轮子,很浪费时间的:)