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

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

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

介绍

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://www.73ya.com/yinliu/2376.html

分享给朋友：
返回列表

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

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

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

抖音拍照 抖音拍照怎么调整比例

很多人拍照都有自己喜欢的比例，而抖音拍照比例要怎么设置呢？今天我们就一起来看看关于抖音拍照，抖音拍照怎么调整比例的相关内容。 抖音拍照怎么调整比例 抖音短视频怎么设置视频尺寸 大家在使用抖音自带的功能进行...

短视频如何快速涨粉,新手也能看

近几年短视频如火如荼的进行着，也让越来越多的人加入到短视频的拍摄行列中。但是大多数都是以年轻人为主，可见现在的抖音越来越年轻化，而且也不断的衍生出其它方式。广告营销，直播带货，搞笑创作者比比皆是。进入短视频很容易，但是想要有很多的粉丝并不容易，那么短视频如何快速涨粉？接下来就跟着小编一起...

快手老铁直播经济怎么样,快手电商业务发展举措

又到财报季，直播行业角斗继续。快手老铁直播经济又交出了一份怎样的答卷呢？北京时间8月25日，快手公布了2021年第二季度财报。根据财报显示，2021年上半年快手总收入为361.5亿元，相较2020年上半年253.2亿元，同比增长42.8%。具体到2021年第二季度快手总营收为191.4亿...

怎么制作原创短视频,有哪些技巧步骤

其实制作一个好的短视频需要考虑构思、拍摄、剪辑、传播平台等多个因素，每一个环节都是非常重要的。在刚开始入门的时候，很多知识可能都会生涩难懂，但是制作短视频的每一个步骤都必须做好，只有这样才有高质量的作品可言。那么接下来就跟着小编一起来看看怎么制作原创短视频吧。 怎么制作原创短视频？ 第...

快手极速版怎么挣钱,邀请好友得更多

快手极速版怎么挣钱？快手一直以来有个挣钱的渠道，但是很多人都不知道，不仅看视频可以挣钱，而且观看的多挣得也多，不仅如此，邀请新用户来看也能获取奖励。听到这里，是不是有点后悔错过了这个赚钱的渠道。那么接下来就跟着小编一起来看看吧。 邀请新朋友奖励 邀请好友当日奖励为最高8元，用户没使用过...

2020年义乌有多少人口 义乌人口2020总人数口介绍

义乌市，隶属于浙江省金华市，古称“乌伤”，是金华市所辖县级市，那么，义乌人口数有多少呢？据《义乌市第七次人口普查主要数据公报》，至2020年11月，义乌全市常住人口1859390人，占金华全市人口比26.37，在金华市人口排行中位居第一，是金华市人口最多的区县（含县级市）。至2020年末...

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