一键复制淘口令问题，不太会。

哥斯拉 · 发表于 4 天前

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

第一：
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

第二：
‌设置 HTML 元素‌：使用 data-clipboard-text 属性指定要复制的内容。
<button class="copy-btn" data-clipboard-text="您的口令内容在这里">一键复制</button>

第三：
初始化并监听事件‌：
<script>
var clipboard = new ClipboardJS('.copy-btn');

clipboard.on('success', function(e) {
      console.log('复制成功');
      e.trigger.textContent = '复制成功';
      setTimeout(function() {
         e.trigger.textContent = '一键复制';
      }, 2000);
      e.clearSelection();
});

clipboard.on('error', function(e) {
      console.error('复制失败');
      e.trigger.textContent = '复制失败';
});
</script>

我想做个一键复制淘口令的功能，百度ai搜出的答案如上，我把这三个都放到网站模板里面了，更新网站和缓存，但是点击一键复制，没反应。还有哪里我没设置的？

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

浅生 · 发表于 4 天前

没反应，你是要弹窗提醒吗那就alert一下吧

独家记忆 · 发表于 4 天前

社区大神多会帮你的

独家记忆 · 发表于 4 天前

社区大神多会帮你的

拾光 · 发表于 4 天前

服了，你随便问一个国外大模型就能搞定的事，再不济，你问个元宝，问个豆包也比这个强啊.........

IT618发布 · 发表于 4 天前

问豆包

独家记忆 · 发表于 4 天前

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一键复制淘口令</title>
<style>
      /* 淘口令复制模块样式，可根据自己网站风格修改 */
      .tao-code-box {
         width: 90%;
         max-width: 500px;
         margin: 50px auto;
         padding: 20px;
         border: 1px solid #eee;
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      }
      /* 淘口令展示框 */
      .tao-code-input {
         width: 100%;
         height: 48px;
         line-height: 48px;
         padding: 0 15px;
         border: 1px solid #ff4400; /* 淘宝橙，贴合淘口令风格 */
         border-radius: 4px;
         font-size: 16px;
         color: #333;
         box-sizing: border-box;
         margin-bottom: 15px;
         outline: none;
      }
      .tao-code-input:focus {
         border-color: #ff6600;
         box-shadow: 0 0 3px rgba(255,68,0,0.3);
      }
      /* 复制按钮 */
      .copy-btn {
         width: 100%;
         height: 48px;
         background-color: #ff4400;
         color: #fff;
         border: none;
         border-radius: 4px;
         font-size: 18px;
         font-weight: 500;
         cursor: pointer;
         transition: background-color 0.2s;
      }
      .copy-btn:hover {
         background-color: #ff6600;
      }
      .copy-btn:active {
         background-color: #e63900;
      }
      /* 复制成功提示 */
      .copy-tip {
         margin-top: 10px;
         text-align: center;
         font-size: 14px;
         color: #67c23a;
         display: none; /* 默认隐藏 */
      }
</style>
</head>
<body>

<div class="tao-code-box">
      
      <input type="text" class="tao-code-input" value="【淘宝好物】￥abc123def￥点击复制打开淘宝即可购买" readonly>
      
      <button class="copy-btn">一键复制淘口令</button>
      
      <div class="copy-tip">✓ 复制成功！打开淘宝即可使用</div>
</div>

<script>
      // 获取元素
      const codeInput = document.querySelector('.tao-code-input');
      const copyBtn = document.querySelector('.copy-btn');
      const copyTip = document.querySelector('.copy-tip');

      // 复制核心函数
      copyBtn.addEventListener('click', async () => {
         try {
            // 方案1：Clipboard API（现代浏览器主流，简洁）
            await navigator.clipboard.writeText(codeInput.value);

            // 方案2：兼容低版本浏览器（可选，注释掉方案1可启用）
            // codeInput.select();
            // document.execCommand('copy');

            // 显示复制成功提示
            copyTip.style.display = 'block';
            // 2秒后隐藏提示
            setTimeout(() => {
                  copyTip.style.display = 'none';
            }, 2000);

         } catch (err) {
            // 复制失败的容错处理
            alert('复制失败，请手动选中复制！');
            console.error('复制错误：', err);
         }
      });
</script>
</body>
</html>