js右击弹框实现进行复制粘贴功

js右击弹框实现进行复制粘贴功能

js右击表格弹框实现进行复制粘贴功能

效果图：文章下有下载地址

第三方插件：clipboard.js
jquery 扩展右击事件

只需要注入两个js,和一段css即可实现

<link src="common.css"></link>
<script src="clipboard.js"></script>
<script src="mouseRight.min.js"></script>

css引用

common.css

/* 复制粘贴的css  */
.wrap-ms-right{
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 5px 0;
	min-width: 80px;
	margin: 0;
	display: none;
	font-family: "微软雅黑";
	font-size: 14px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, .15);
	box-sizing: border-box;
	border-radius: 4px;
	-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.ms-item{
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.ms-item:hover{
    background-color: #343a40;
    color: #FFFFFF;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

js引用

mouseRight.min.js

(function (b, a) {
    b.prototype.mouseRight = function (c, h) {
        var f, d, e, g, v;
        e = this;
        f = {menu: [{},], ele: "wrap-ms-right", ele_item: "ms-item",};
        d = b.extend({}, f, c);
//        b(this).each(function () {
            (function i() {
                var n = b("<div></div>");
                n.attr("class", d.ele);
                for (var m = 0; m < d.menu.length; m++) {
                    var k = b("<li></li>");
                    k.addClass(d.ele_item);
                    var l = b("<i></i>");
                    k.attr("data-item", m);
                    l.addClass(d.menu[m].icon);
                    l.attr("data-item", m);
                    l.appendTo(k);
                    k.appendTo(n);
                    l.after("&nbsp; " + d.menu[m].itemName)
                }
                n.prependTo("body");
                var j = b("<div></div>");
                j.attr("class", "shade");
                j.prependTo("body")
            })();
            a.oncontextmenu = function () {
                return false
            };
            /*b(this).mousedown(function (j) {
                if (j.which === 3) {
                    v = j.currentTarget.innerHTML;
                }
            });*/
            b("." + d.ele).click(function (l) {
                var j = parseInt(b(l.target).attr("data-item"));
                for (var k = 0; k < d.menu.length; k++) {
                    if (j == k) {
                        d.menu[k].callback(l);
                        b("." + d.ele).css({"display": "none"})
                    }
                }
            });
            /*b(".shade").click(function () {
                b("." + d.ele).css({"display": "none"})
            })*/
//        });
        return this
    }
})(jQuery, window);


//鼠标右击事件
$(function(){
	$('body').append("<div class = 'btn' style='display: none'>Copy</div>");
    var copyValue="";
    //去除浏览器的右击出现的框
    $('body').on('mousedown',"td",function(event){
       if(1 == event.which){
           $(".wrap-ms-right").css({"display": "none"})
       }else if (3 == event.which){
           if (event.target.nodeName == "TD"){
        	   copyValue = "";
        	   $(".wrap-ms-right").css({"display": "block", "top": event.pageY + "px", "left": event.pageX + "px"});
        	   if($(this).children().length > 0){
        		   if($(this).children()[0].tagName == "SELECT"){
        			   copyValue= $(this).children().find("option:selected").text();
        		   }else{
        			   copyValue= $(this).children().html();
        		   }
        	   }else{
        		   copyValue = event.currentTarget.innerHTML;
        	   }
        	   copyValue=$.trim(copyValue);
               $(this).mouseRight({menu: [{
                   itemName: "复制",
                   icon:"fa fa-files-o",
                   callback: function(e) {
                       $(".btn").trigger("click");
                   }
               }
               ]});
           }
       }
    })
    var clipboard = new ClipboardJS('.btn', {
       text: function() {
           return copyValue;
       }
    });
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
    	e.clearSelection();
        console.log(e);
    });
});

clipboard.js 第三方插件

/*!
 * clipboard.js v2.0.4
 * https://zenorocha.github.io/clipboard.js
 * 
 * Licensed MIT © Zeno Rocha
 */

资源下载地址
https://download.csdn.net/download/shiguang_zhiren/11169416