基于clipboard.js实现右键把选中文本复制到剪贴板

最新推荐文章于 2024-07-22 19:37:58 发布

kenhins

最新推荐文章于 2024-07-22 19:37:58 发布

阅读量1.3k

点赞数

分类专栏： Javascript jQuery

本文链接：https://blog.csdn.net/kenhins/article/details/87369347

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

jQuery

40 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/>
<c:set var="ajaxUrl" value="${frontPath}${pageContext.request.contextPath}"/>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<c:set var="ctxForm" value="${pageContext.request.contextPath}/form_template"/>
<c:set var="formHtml" value="${pageContext.request.contextPath}/form_html"/>
<!DOCTYPE html>
<html>
<head>
<%-- <link rel="stylesheet" href="${ctxStatic}/plugins/contextjs/jquery.contextMenu.css"> --%>
<link rel="stylesheet" href="${ctxStatic}/plugins/contextjs/rightMenu.css">
</head>
<body>

<ul class="contextmenu">
	<li class="copyBtn"><a id="copyBtn">复制</a></li>
</ul>

<script src="${ctxStatic}/plugins/contextjs/rightMenu.js"></script>
<script src="${ctxStatic}/plugins/contextjs/clipboard.js"></script>
<script type="text/javascript">
var select_content_text = "";
var hour = 1000*60*60;
//读取cookie 
 var info = getLocalValue("cardInfo",hour);
var pathUrl = window.location.pathname;
pathUrl = pathUrl.substr(pathUrl.lastIndexOf("/")+1,pathUrl.length);
var indexUrl = "index";
var guestNum = "10001";
if(info){
	$("#top-nav-btn").html("");
	var htmlTxt = "";
	var username = "<a  class='s-btn m-btn' style='color: #39b0d8'><i class='icon-user2'>" +
	"</i><span>"+info.name+"</span></a>";
	
	var indexpage = "<a onclick=location.href='${front}/selfHelpRegistration/index' class='s-btn m-btn button b-info index-btn'>" +
	"<i class='icon-homepage_fill'></i>" +
	"<span>首页</span></a>";
	
	var mypage = "";
	$("#save-btn").hide();//隐藏填单页的保存按钮
	$(".guest-tip").show();
	if(info.userIdentific != guestNum){
		//身份证模式登录
		 mypage = "<a  onclick=location.href='${front}/selfHelpRegistration/v2/myList' class='s-btn m-btn button b-info'>" +
			"<i class='icon-file-text2'></i>" +
			"<span>我的诉状</span></a>";
			
		 $("#save-btn").show();//显示填单页的保存按钮
		 $(".guest-tip").hide();
	}
	
	var logoutbtn = "<a  onclick='logout();' class='s-btn m-btn button b-danger'>" +
	"<i class='icon-out'></i><span>退出</span>" +
	"</a>";
	

	if(pathUrl == indexUrl){
		htmlTxt = username + mypage + logoutbtn;
	}else{
		htmlTxt = username + indexpage + mypage + logoutbtn;
	}
			
	$("#top-nav-btn").html(htmlTxt);
	
}else{
	$("#top-nav-btn").html("");
	var htmlTxt = "<a  class='s-btn m-btn' onclick='login();' style='color: #39b0d8'>" +
			"<i class='icon-user2'></i>" +
			"<span id='username'>请登录</span>" +
			"</a>";
	$("#top-nav-btn").html("");
	
	if(pathUrl == indexUrl){
		//首页
	}else{
		//过时自动跳转首页
		$.confirm({
			animationSpeed: 300,
			title: "<p class='dl-tit'>登录已超时，5秒后跳转首页</p>",
			autoClose: 'confirm|5000',
			content: "",
			buttons: {
				confirm: {
					text: '确定',
					btnClass: 'btn btn-info',
					action: function () {
						window.location.href='${front}/selfHelpRegistration/index';
					}
				}
			}
		});
	}
	
}


//获取选中的文本
document.addEventListener("mouseup", mouseUp, true);

//释放鼠标处理函数
function mouseUp() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    if ("" != text) {
        //console.log(text);
    	select_content_text = text;
    }
}

//复制
var clipboard = new ClipboardJS('.copyBtn', {
    text: function(trigger) {
        return select_content_text;
    }
});
clipboard.on('success', function(e) {
	if(select_content_text){
		alert("复制成功,请按(CTRL + V)组合键进行粘贴");
		select_content_text = "";
	}
});
clipboard.on('error', function(e) {
    console.log(e);
});

</script>
</body>
</html>