html点击自动复制功能,html5页面如何实现点击复制的功能

2024-06-11 05:24:01

html5页面如何实现点击复制的功能

发布时间：2020-09-22 11:07:18

来源：亿速云

阅读：136

作者：小新

这篇文章主要介绍了html5页面如何实现点击复制的功能，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用clipboard插件来实现。以下是一个简单的demo。

首先可以通过npm install clipboard --save-dev 来安装该插件

clipboard示例

从属性里复制

复制到剪切板-111

从另外一个元素复制内容

222-从另外一个元素复制内容

复制到剪切板-222

JS里指定复制的内容

复制到剪切板-333

//从属性里复制

var btn = document.getElementById('btn');

var clipboard = new Clipboard(btn);//实例化

clipboard.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});

//从另外一个元素复制内容

var btn2 = document.getElementById('btn2');

var clipboard2 = new Clipboard(btn2);//实例化

clipboard2.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard2.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});

//JS里指定复制的内容

var btn3 = document.getElementById('btn3');

var clipboard3 = new Clipboard(btn3, {

text: function() {

return '333-JS里指定复制的内容';

}

});

clipboard3.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard3.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});

html点击自动复制功能,html5页面如何实现点击复制的功能相关推荐

html点击关闭按钮关闭当前页面刷新,jq点击关闭按钮，关闭当前页面
30秒到达战场关闭页面没毛病.就是这样
JSP学习笔记（五）：日期处理、页面重定向、点击量统计、自动刷新和发送邮件...
一.JSP 日期处理: 使用JSP最重要的优势之一,就是可以使用所有Java API.本节讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数.第 ...
html5微信自动播放视频,科技常识：HTML5页面音视频在微信和app下自动播放的实现方法...
今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法的相关 ...
html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放
怎么实现HTML5页面音视频在微信和app下自动播放发布时间:2020-09-28 15:52:53 来源:亿速云阅读:90 作者:小新这篇文章给大家分享的是有关怎么实现HTML5页面音视频在微 ...
html5 手机导航栏左右滑动效果,js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于i ...
html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
html5页面常用的代码,最全的 HTML5 知识汇总
引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念.SGML, HTML,XML三者之间的区别 Doc类型 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
html5页面缓存设置
有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest="test.ma ...

最新文章

热门文章