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

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

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

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

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

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

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

版权声明:本文由蓝博发布,如需转载请注明出处。

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

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

帝国CMS使用esub/substr截取前面(或后面)两个字符(或多个字符)

帝国CMS使用esub/substr截取前面(或后面)两个字符(或多个字符)

帝国CMS怎么用灵动标签使用esub/substr截取前面,或者截取后面两个字符或者多个字符呢? ①、帝国网站 显示是"帝国" (这是灵动标签默认的截取标签字段“esub”), [e:loop={'select * from phome_enewsclass where bclassid=0 or...

帝国CMS更新内容提示Table#039;www_**_com.***_ecms_news_data_#039;doesn#039;texist...

帝国CMS更新内容提示Table#039;www_**_com.***_ecms_news_data_#039;doesn#039;texist...

帝国CMS更新整站内容提示:Table 'www_123_com.***_ecms_news_data_' doesn't exist...的解决办法! 相信很多使用帝国cms模板建站的朋友,都有遇到过类似的问题,那么这个是什么问题呢?其实这个是我们后台:871 文章id为871的文章删除了,但是表...

帝国CMS中#091;!--no.num--]标签的用法分析

帝国CMS中#091;!--no.num--]标签的用法分析

帝国CMS [!--no.num--] 标签用法: 帝国CMS[!--no.num--] 指定从某一数字开始显示 代码如下: <?=$bqno+5?> 帝国CMS[!--no.num--] 输出效果为 1 2 3 4 5 6 7 8...样式 代码如下: <?=$bqno?&g...

帝国CMS内容页字段为空判断的用法

帝国CMS内容页字段为空判断的用法

帝国CMS内容页中,如果某个字段没有填写内容就不显示,填写了就正常显示,这种效果怎么实现? PHP判断实现,代码如下: <?php if($navinfor[字段名]) { ?> 现在的内容 <? } else { ?> 不显示 <? } ?>...

帝国CMS灵动标签SQL调用广告

帝国CMS灵动标签SQL调用广告

帝国CMS怎么用灵动标签SQL调用广告呢? 标签实例: [e:loop={"select * from phome_enewsad where adid in (1,2,3) and t=0 order by adid desc limit 20",0,24}] <a href="<?...

帝国CMS404页面优化有什么作用

帝国CMS404页面优化有什么作用

我们应该正确理解什么是帝国cms 404页面。404页面是当页面不存在时被提示的页面。本页面可根据网站管理员的个人喜好随意显示。 用户浏览网站时遇到的错误页面地址、输入错误或帝国cms内容发布后未生成内容页面的原因并不多。然而,这种情况很少见。大多数情况下,搜索引擎可能会包含某个页面。但是,由于不小...