JS实现点击复制

JS实现点击复制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Js复制代码 js模拟选中，按键粘贴（可用于隐藏域粘贴）</title>
</head>
<body>
<p>啊啊啊</p>
<button id="btn">点击复制</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener('click', copyContent);
 
function copyContent () {
  let val = document.querySelector("p").innerText; // 要复制的内容
  document.addEventListener('copy', save); // 监听浏览器copy事件
  document.execCommand('copy'); // 执行copy事件，这时监听函数会执行save函数。
  document.removeEventListener('copy', save); // 移除copy事件
 
  // 保存方法
  function save(e) {
    e.clipboardData.setData('text/plain', val); // 剪贴板内容设置
    e.preventDefault();
  }
}
</script>
	</body></html>

渐变-js复制

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-text {
      background-image: linear-gradient( #3fffea, #007eff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: inline-block;
      font-size: 48px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div class="gradient-text">渐变文字div包裹</div>
<div id="mydiv" src="https://blog.csdn.net/Dark_programmer/article/details/113377270" title="被复制的文本">被复制的文本：123456</div>
<button onClick="mycopy()">复制</button>
<div></div>
<span class="gradient-text">这是渐变文字span包裹</span>
</body>
<script>
function mycopy(){
var content = document.getElementById("mydiv").innerText;
copyToClip(content,"已成功复制");
};
function copyToClip(content,tips) {
      console.log("复制的内容", content,'复制成功后的提示文本',tips);
      var ele = document.createElement("input"); //创建一个input标签
      ele.setAttribute("value", content); // 设置改input的value值
      document.body.appendChild(ele); // 将input添加到body
      ele.select();  // 获取input的文本内容
      document.execCommand("copy"); // 执行copy指令
      document.body.removeChild(ele); // 删除input标签
      if(tips == null){ // 显示复制成功之后的提示文本
		alert('已将内容复制到剪切板')
	 }else{
		alert(tips)
	}
 }

</script>
</html>

posted @ 2023-11-30 14:46  ASini  阅读(196)  评论(0)  编辑  收藏  举报