【HTML】页面按钮-点击复制口令/内容的html代码

攻城狮与产品喵

发布于 2025-08-05 14:58:05

18100

代码可运行

文章被收录于专栏：攻城狮与产品喵攻城狮与产品喵

运行总次数：0

代码可运行

——致力做企业用得上的平台； ——开发企业节省成本的系统；

导读

常用的html标签汇总、以及操作过程中的一些bug问题解决方法，是我们在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就 查询/搜索 一下，实践出真章，做多了自然就熟悉了！

——龙腾飞网络科技-小吴

#页面按钮 #点击复制口令 #点击复制html代码 #html代码

【代码内容】


//这是代码实用位置
<!DOCTYPE html>
<html>
<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>