JavaScript 实现一键复制(id，账号)

在前端有很多的时候需要一键复制账号，密码等，比如QQ的复制QQ账号，一些程序应用的个人信息页，都会有一键复制这个功能，下面给大家分享一下一键复制的实现方法

HTML准备

先提前准备HTML，让大家能够更明确清晰的理解

<!-- 文本复制 -->
<div class="text" >
	日落西山你不在,东山再起你是谁?
	<input type="text" id="inp" />
</div>
<button type="button" id="but" onclick="but()">复制</button>

之所以是这样写结构是因为JavaScript一键复制功能需要用到document.execCommand()方法，这个方法不能复制div中的内容，只能复制input中的值
效果：

JavaScript 逻辑

主要思路是先获取到div元素中的text文本，然后将input框的value值改为div元素中的文本，对input框的值进行选中，然后调用document.execCommand()事件，需要传递一个’copy’字符串，表示复制选中的内容

// 文本复制
function but(){
    
    
	let text = document.getElementsByClassName('text')[0].innerText;// 获取到div元素中的文本
	let inp = document.getElementById('inp');// 获取到input框
	inp.value = text;// 将input框的值赋值为div元素中的文本
	inp.select(); // 选中input框中的文本
	document.execCommand("copy");// 调用document的execCommand事件
}

现在运行HTML即可，点击复制按钮即可将div元素中的文本复制到剪切板中
正常的肯定是不会将input框显示出来的，可以问其加上样式，将其隐藏掉

css

#inp{
    
    
	position: absolute;
	left: 0;
	opacity: 0;
}

效果：

整体其实都比较容易理解，只需要记住需要使用document.exec Command()方法即可，还需要知道不能复制一般的文本，只能复制input的值