HTML点击按钮自动复制文本

往事不堪回首..

已于 2023-11-06 11:12:54 修改

阅读量2.1k

点赞数 2

分类专栏：前端集文章标签： HTML点击按钮自动复制文本

于 2022-12-07 15:09:53 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/128220697

版权

前端集专栏收录该内容

45 篇文章 1 订阅

订阅专栏

navigator.clipboard.writeText(text) //就是写入粘贴板的方法，但是部署到服务器用会报错，本地存为html能正常使用，为了兼容性更好，使用下面的整个方法在任何地方都能正常使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
	<button id="a-1-1-A" onclick="copyText1(this.id)">点击复制id，兼容写法</button>
    <script>

		function handleCopyValue(text) {
			//浏览器禁用了非安全域的 navigator.clipboard 对象
			//在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
			if (!navigator.clipboard && window.isSecureContext) {
			  return navigator.clipboard.writeText(text);
			} else {
			  // 判断是否支持拷贝
			  if (!document.execCommand('copy')) return Promise.reject()
			  // 创建标签，并隐藏
			  const textArea = document.createElement('textarea')
			  textArea.style.position = 'fixed'
			  textArea.style.top = textArea.style.left = '-100vh'
			  textArea.style.opacity = '0'
			  textArea.value = text
			  document.body.appendChild(textArea)
			  // 聚焦、复制
			  textArea.focus()
			  textArea.select()
			  return new Promise((resolve, reject) => {
				// 不知为何，必须写这个三目，不然copy不上
				document.execCommand('copy') ? resolve() : reject()
				textArea.remove()
			  })
			}
		}

		/*点击复制 ，val是需要复制的值 */
		function copyText1(val){
			 handleCopyValue(val)
			  .then(() => {
				alert('复制成功')
			  })
			  .catch(() => {
				alert('自动复制失败，请手动复制')
			  })

		}

    </script>
  </body>
</html>