当前位置：首页 > 引流 > 正文内容

js实现复制文本（js脚本编写教程）

admin3年前 (2022-10-11)引流860

介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。

安装

  1. 通过npm安装（或者直接下载js文件引入）

npm install clipboard –save

2.引入js

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

//官网提供了下载地址，也可以使用免费的cdn

使用

示例

<!DOCTYPE html>
<html class="no-js">
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title></title>
 <meta name="description" content="" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link
 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
 rel="stylesheet"
 />
 </head>
 <body>
 <div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo">复制</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>
 </body>
</html>

     

如图书最简单的例子，单机复制按钮即可自动复制文本框的内容

换成下面就会变成剪切，主要是以下属性

data-clipboard-action=”cut”

<div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>

剪切操作仅适用于<input>或<textarea>元素

或者这样，直接复制 data-clipboard-text属性的内容

<button class="btn" data-clipboard-text="要复制的内容">
 复制
</button>

 

事件监听，可以打开控制台自行尝试

var clipboard = new ClipboardJS('.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);
});

高级用法

  • 动态绑定

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

  • 动态赋值

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

  • 要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值

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

  • 更好的管理单页面的DOM生命周期

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

兼容性

   

备注

如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级

提供Chrome和Firefox的扩展

一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。

标签： js

  • 随机文章
  • 热门文章
  • 热评文章

扫描二维码推送至手机访问。

版权声明：本文中部分文字、图片、音频、视频来源于互联网及公开渠道，仅供学习参考，版权归原创者所有! 如侵犯到您的权益，请及时通知我们！我们将在第一时间内删除。

本文链接：http://73ya.com/yinliu/2376.html

分享给朋友：
返回列表

上一篇：电脑用什么照相软件好用（能照艺术照的手机软件）

下一篇：python flask web开发（flask web开发实战:入门,进阶）

“js实现复制文本（js脚本编写教程）” 的相关文章

抖音极速版赚钱是真的吗 抖音极速版赚钱领现金

其实现在很多软件能够赚钱，而一些视频软件刷刷就能够赚钱。那么今天我们就一起来看看关于抖音极速版赚钱是真的吗，抖音极速版赚钱领现金的相关内容。 抖音极速版赚钱是真的吗 最近才开始玩抖音极速版赚钱的方式有很多种。...

怎么运用短视频素材,两种方法告诉你

我们知道近几年最火的是短视频，那么现在热议最多却是短视频制作，短视频制作中很重要的就是素材的运用，很多人会找短视频素材，但是并不懂得怎么使用，有的比较复杂。所以当我们找到短视频素材怎么用？接下来就跟着小编一起来看看吧。 怎么运用短视频素材, 第一种 不用剪辑，直接使用。 人物访谈，我...

快手推广广告多少钱,有几种计费方式

当你选择做快手广告推广的时候，就要想到其实做这个事情所花费的成本是多少，需要多少的费用才能支撑接下来的推广运营一系列的费用，快手平台拥有超过5亿的用户，每天有1.6亿客户浏览快手短视频。据统计，快手平台上的用户占比80%为90后，比较年轻化。所以在快手平台上投放广告，先做好产品账号定位，...

素材库视频免费下载,高清高质量等你来

刚接触短视频，大家最主要遇到的四大问题是——选题、写脚本、拍摄、剪辑。对于一个文案编辑者来说，素材来源有时候也可以提供灵感，对于一个视频剪辑后期来说，一个好素材也是非常重要的。善用素材，可以帮助你在制作短视频的过程中提高效率，提升质量。掌握了素材资源，玩转短视频也不是问题哦。今天，就给大...

快速学会短视频制作,短视频的优势有哪些

转眼之间，2022已经来临，在短视频的红利期越多的人倾向于学习短视频。还有各种直播带货，产品运营，精彩剧本，搞笑视频，形式各样，但是最后的目的是什么。盈利和喜欢。你只有有想要做的事情，感兴趣才能做的更好。那么新手小白也能在这样的平台上快速的展现身手。那么接下来快速学会短视频制作。跟着小编...

抖音网页版怎么下载,各种福利都有的

平时看抖音是不是看腻了呢，我给大家分享过抖音国际版 ，也叫Tiktok，由于上面的视频比较特殊（敏感），分享的app经常会被封。所以今天给大家介绍抖音国际版的代替版，不仅免费而且全高清，画质清楚。大家也可以直接在网上找更合适的资源，网站有更多资源。建议直接在Safari打开。接下来就跟着...

Copyright 73ya.com Rights Reserved.
赣ICP备2022005602号-1
赣公网安备36070302361030号