前端实现复制功能

前端实现复制功能

<!-- 点击复制按钮实现复制下面这一串编码 -->
<span id="code">6667770000000999888</span><button class="copy_btn">复制</button>

复制方法（需要引入jq）

$("body").on("click", ".copy_btn", function() {
	let copyText = $("#code").text();  // 先获取需要复制的文本值
	
	let flag = copyText(copyText);  // 设定一个复制标志flag，后续根据flag将复制按钮改成“已复制”，copyText是复制函数
	if(flag) {
		$(".copy_btn").text("已复制");
		$("body").off("click", ".copy_btn");  // 已复制之后为复制按钮移除复制功能
	}
})

function copyText(copyText) {
	let textInput = "<input type='text' class='copy_input'>";  // 创建一个输入框，用于临时储存复制的内容
	$("body").append(textInput);  // 把这个输入框追加到页面，最好用绝对定位，z-index:-1000;避免出现在页面可见范围内造成抖动

	let currentFocus = $(document.activeElement);  // 标记一下当前焦点元素
	$("copy_input").val(copyText).focus().select();  // 对刚追加的临时存储用的input赋值需要复制的文本，然后让其获得焦点，并选中
	let flag;
	try {
		flag = document.execCommand("copy");  // 执行复制，并给flag,执行了之后为true
	} catch (err) {
		flag = flase;  // 出错则将flag复制为flase
	}
	
	$("input").remove(".copy_input");  // 执行完复制操作之后，删除临时存储input
	currentFocus.focus();  // 焦点给到复制之前的焦点元素上
	return flag;
}