<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery文本复制控件</title>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="plugins/TxtCopy.js"></script>
<script type="text/javascript">
//jquery文本复制控件
(function ($) {
//初始化
function init(target) {
var opt = $.data(target, "TxtCopy").options;
setContent(target);
if (opt.copyType == "double") {
$(target).dblclick(_click);
}
else if (opt.copyType == "right") {
$(target).mousedown(function (e) {
if (3 == e.which) {
_click();
}
})
}
else {
$(target).click(_click)
}
function _click() {
//复制内容
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents($(target)[0]);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
//提示
opt.success && opt.success();
}
}
//设置文字
function setContent(target) {
var opt = $.data(target, "TxtCopy").options;
var tipTxt = "点击可复制：";
if (opt.copyType == "double") {
tipTxt = "双击可复制：";
}
else if (opt.copyType == "right") {
tipTxt = "右键可复制：";
}
$(target).html(opt.content).attr("title", tipTxt + opt.content).css(opt.styles);
}
$.fn.TxtCopy = function (options, params) {
if (typeof options === 'string') {
return $(this).TxtCopy.methods[options].call(this, params);
}
options = options || {};
return this.each(function () {
var opt = $.data(this, "TxtCopy");
if (opt) {
$.extend(opt.options, options);
setContent(this);
} else {
$.data(this, "TxtCopy", {
options: $.extend(true, $.fn.TxtCopy.defaults, options)
});
init(this);
}
});
};
$.fn.TxtCopy.defaults = {
cls: "", //控件
content: null, //文字（与标题）
styles: { "cursor": "pointer"}, //样式
success: function () { //成功事件
//可自己设置成功事件
alert("复制成功！");
},
copyType: "click" //提示类型（click单击，double双击，right右键）
};
if ($.parser) {
$.parser.plugins.push('TxtCopy');
}
})(jQuery);
</script>
<script>
$(function () {
//单击复制
$("#h1").TxtCopy({ content: "点击我可复制内容1111" });
//双击复制
$("#h2").TxtCopy({ content: "双击我可复制内容2222", styles: { "color": "blue" }, copyType: "double" });
//右键复制
$("#h3").TxtCopy({ content: "右键我可复制内容3333", styles: { "color": "red" }, copyType: "right" });
})
</script>
</head>
<body>
<h1>jquery文本复制控件</h1>
<br />
<br />
<h2 id="h1"></h2>
<h2 id="h2"></h2>
<h2 id="h3"></h2>
</body>
</html>
