当前位置：首页 > 文章 > 帝国CMS > 正文内容

帝国cms利用html+js实现一键复制某字段的内容

3年前 (2022-10-22)帝国CMS7007

可以实现一键复制需要的字段。

HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
	<script src="js/clipboard.js"></script>
	<style>
		.tips,.tipsbg{display: none;}
		.tipsbg{width: 100%;height: 100%;position: fixed;background: rgba(0, 0, 0, 0.3); top: 0px; left: 0px; right: 0px; bottom: 0px;z-index: 2;}
		.tips{width: 160px;height: 200px;position: fixed;background: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; right: 0px; bottom: 0px;z-index: 3;margin: 200px auto 0 auto;border-radius: 10px;}
		.tips img{width: 80px;margin: 30px auto;display: block;}
		.tipssuc{width: 100%;height: 40px;line-height: 40px;text-align: center;color: #fff;font-size: 16px;}
		.sidebar{width:30px;position:fixed;top:300px;left:50%;margin-left:-555px;z-index:9}
		.sidebar a {width: 42px;padding: 13px 0;color: #666;background: #fff;-webkit-box-shadow:0px 2px 15px 0px rgba(0,0,0,0.1);box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1);border-radius: 21px;text-align: center;transition: all .2s cubic-bezier(.215,.61,.355,1);position: relative;cursor: pointer;margin-bottom:15px;display: block;text-decoration:none;}
		.sidebar span {font-size: 13px;display: block;padding: 0 12px;line-height: 17px;}
		.sidebar a:hover{background-color:#478ede; text-decoration:none;color:#fff;-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
	</style>
</head>
<body>
	<div id="docopy" class="content">
		alskdjf
	</div>
	<div class="tipsbg" onclick="$('.tips').hide();$('.tipsbg').hide();"></div>
	<div id="success" class="tips" onclick="$('.tips').hide();$('.tipsbg').hide();">
		<img src="images/cg.png" alt="">
		<div class="tipssuc">复制成功</div>
	</div>
	<div class="sidebar">
		<a id="copytext" data-clipboard-action="copy" data-clipboard-target="#docopy" class="fuzhi"><span>一键复制</span></a>
	</div>
	<script>
		$(document).ready(function () {
			var clipboard = new ClipboardJS('#copytext');

			clipboard.on('success', function (e) {
				$('#success').show();
				$('.tipsbg').show();
			});
		});
	</script>
</body>
</html>

JS+html打包下载地址：

1649611865-12cba3ee81cf4a7.rar

效果演示：http://dhg1.cncobo.com/dhg100z/5216.html

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

本文链接：https://blueboss.cn/p/729.shtml

标签: 一键复制前端记录帝国CMS 知识社区

返回列表

上一篇：帝国cms灵动标签调用一级栏目列表

下一篇：帝国cmsPHP语句统计全站tags关键词数量/统计全站栏目数量

“帝国cms利用html+js实现一键复制某字段的内容” 的相关文章

帝国CMS灵动标签循环子栏目导航

帝国CMS怎么用灵动标签调用循环子栏目导航呢?下面帝国cms模板网就来告诉大家怎么调用： [e:loop={"select classid,classname,islast from {$dbtbpre}enewsclass where bclassid='0' and showclass=0 o...

帝国CMS灵动标签调用指定时间段的信息

帝国CMS灵动标签怎么调用指定时间段的信息呢？ 1、某天发布的文章： [e:loop={'news',10,18,0,'newstime>='.to_time('2010-11-11 00:00:01').' and newstime<='.to_time('2010-11-11 23...

帝国cms栏目自定义字段调用标签

内容页和列表页调用当前栏目自定义字段的标签都是一样的,调用代码如下： <?=ReturnClassAddField(0,'自定义字段')?>没什么说的，这很简单。...

帝国CMS内容页调用指定ID的文章可以指定多篇

帝国CMS内容页中调用多篇指定id文章的方法，下面一起来学习学习吧：大概的思路是：新建1个产品文章字段，这样的话，每个产品里面都可以填写不同的产品id，然后在模板里面调用出来即可。下面附上内容页模板里面调用多篇指定文章id的php代码： <?php $sql='id in ('.$na...

帝国CMS灵动标签调用子栏目及子栏目信息

帝国CMS灵动标签调用子栏目及子栏目信息的方法代码如下： <ul class="cp0_ul"> [e:loop={"select classid,classname from {$dbtbpre}enewsclass where bclassid=8 order by myord...

帝国CMS灵动标签调用包含指定关键词关键字文章

用灵动标签调用包含指定的关键词，和关键字的文章呢?其实实现的方法不难，以下是调用方法：指定关键词调用： [e:loop={"select * from {$dbtbpre}ecms_news where title like '%这里是指定的关键词%' and checked=1 order b...

Blueboss