哥斯拉 发表于 2026-1-28 09:24:18

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

第一：
<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搜出的答案如上， 我把这三个都放到网站模板里面了，更新网站和缓存，但是点击一键复制，没反应。 还有哪里我没设置的？

浅生 发表于 2026-1-28 09:25:13

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

独家记忆 发表于 2026-1-28 09:26:05

社区大神多 会帮你的

独家记忆 发表于 2026-1-28 09:26:13

社区大神多 会帮你的

拾光 发表于 2026-1-28 09:27:02

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

IT618发布 发表于 2026-1-28 09:27:44

问豆包

独家记忆 发表于 2026-1-28 09:28:30

<!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">
      <!-- 淘口令展示/输入框，value里放你的淘口令 -->
      <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>

IT618发布 发表于 2026-1-28 09:29:12

是不是实际复制了，只是没有提示？

独家记忆 发表于 2026-1-28 09:30:12

没用过

拾光 发表于 2026-1-28 09:30:40

AI写一个就行
页: [1] 2
查看完整版本: 一键复制淘口令问题，不太会。