使用js实现文本复制:clipboard.js

js特效 源码巴士 216浏览 0评论

clipboard.js 是一个完全使用js实现的将文本复制到剪切板的工具。不依赖flash.也不依赖框架,体积小巧,压缩版本只有3kb。

开发缘由:世面上实现文本复制的代码,不是配置繁琐就是依赖flash,这就是开发 clipboard.js 的初衷。

安装:可以直接使用npm安装。

npm install clipboard --save

或者直接下载压缩包

设置:引入 dist 中的脚本,或者从第三方CDN引入。

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

然后你需要通过传递一个DOM,或者HTML元素,或者HTML元素组,将其实例化

new ClipboardJS('.btn');

使用:本js充分利用了html5 data属性的优势。

从其他位置复制文本:点击复制时将会把id=”foo”的内容复制到剪切板

<!-- 复制文本的目标位置 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- 触发 -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="复制">
</button>

从其他位置剪切文本: 点击剪切时将会把id=”bar”的内容剪切到剪切板

<!-- 剪切的目标位置 -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- 触发 -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    剪切
</button>

从属性复制文本:点击复制时将会把data-clipboard-text的内容复制到剪切板

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

浏览器支持

网站: https://clipboardjs.com

转载请注明:源码巴士 » 使用js实现文本复制:clipboard.js

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址