js 通过添加DOM节点事件复制文本到剪切板 document.execCommand("copy")

本函数的原理是调用document.execCommand("copy")的方法
执行复制的函数仅使用了JavaScript原生代码,调用函数可用js或者jq的方式

document.execCommand("copy")对不同浏览器的兼容性不同,详情请在这里参考



第一版函数:

以下函数是复制text字符串内的文本到剪切板,如果复制失败则运行errFn函数:
errFn可以为纯function函数,也可以是写成字符串的函数如"errorFN", "errorFN()", "errorFN(val)"

function copyText(text, errFn){
	var textarea = document.createElement("textarea");
	var currentFocus = document.activeElement;
	document.body.appendChild(textarea);
	textarea.value = text;
	textarea.focus();
	if (textarea.setSelectionRange){textarea.setSelectionRange(0, textarea.value.length);}
	else {textarea.select();}
	try {document.execCommand("copy");}
	catch(err){
		if (errFn){
			if (typeof errFn == "function"){errFn();}
			else if (typeof errFn == "string"){
				if ((errFn.indexOf("(") == -1) && (errFn.indexOf(")") == -1)){var cc = "()"} else {var cc = ""}
				eval(errFn + cc);
			}
		}
	}
	document.body.removeChild(textarea);
	currentFocus.focus();
};

函数执行的代码:

// JavaScript原生方式:(必须将代码放在DOM元素的后面)
document.getElementById("执行的ID").onclick = function(){
	var text = document.getElementById("被复制文本的ID").value; //或 var text = "指定内容"
	copyText(text, errFn); //或 copyText(text) 或 copyText(text, "errFn") 或 copyText(text, "errFn(val)")
}; // Class则将getElementById换成getElementsByClass

// jQuery方式:
$("执行的ID或Class").onclick(function(){
	var text = $("被复制文本的ID或Class").val;//或 var text = "指定内容"
	copyText(text, errFn);
});

//【可选】自定义的复制失败时的函数
function errFn(){
	console.log("copyText has error");
	alert("复制失败");
};




第二版函数:

以下函数是复制text字符串内的文本到剪切板,并返回一个布尔值(truefalse):

function copyText(text){
	var textarea = document.createElement("textarea");
	var currentFocus = document.activeElement;
	document.body.appendChild(textarea);
	textarea.value = text;
	textarea.focus();
	if (textarea.setSelectionRange){textarea.setSelectionRange(0, textarea.value.length);}
	else {textarea.select();}
	try {var state = document.execCommand("copy");}
	catch(err){var state = false;}
	document.body.removeChild(textarea);
	currentFocus.focus();
	return state;
};

函数执行的代码:

// JavaScript原生方式:(必须将代码放在DOM元素的后面)
document.getElementById("执行的ID").onclick = function(){
	var text = document.getElementById("被复制文本的ID").value;
	// 或 var text = "指定内容"
	var state = copyText(text);
	if (state == true){
		alert("复制成功");
	} else if (state == false){
		alert("复制失败");
	}
	//alert(state ? "复制成功" : "复制失败")
	// 上面的是更简单的弹窗方法
};

// jQuery方式:
$("执行的ID或Class").onclick(function(){
	var v = $("被复制文本的ID或Class").val;
	// 或 var text = "指定内容"
	var state = copyText(text);
	if (state == true){
		alert("复制成功");
	} else if (state == false){
		alert("复制失败");
	}
	//alert(state ? "复制成功" : "复制失败")
	// 上面的是更简单的弹窗方法
});

你可能感兴趣的:(js,copy,复制,复制文本,execCommand,javascript)