帮忙写下html代码，点击文字就复制内容

zucker · 发表于 2023-8-9 16:17

本帖最后由 zucker 于 2023-8-9 16:24 编辑

帮忙写一段代码，后期方便模块化，只需简单修改，就在一个页面里面多次用，或者不同页面用。

效果这样，点击文字A就能复制内容B。下面的“这是一段文字”这部分，鼠标点一下，就可以复制到剪贴板的内容为：哈哈哈哈哈。并提示“已成功复制”，可以弹窗提醒，也可以其他方式提醒。
要同时支持pc端和手机的浏览器。可以用clipboard.js，也可以不用，怎么简单怎么来。

不复制这是一段文字这里

谢谢！！

steven026 · 发表于 2023-8-9 16:17

zucker 发表于 2023-8-11 20:34
你这个可以，不报错，不过位置我没看懂怎么调整。能直接在原文字的地方显示已复制吗？或者旁边一点点，不 ...

弹出的文字是通过CSS控制的
因为没有具体使用环境，所以没法做对应优化

你可以直接改这行
span.style.cssText = `position:absolute;background:white;top:${y}px;left:${x}px`;
top:${y}px; 代表纵坐标
left:${x}px; 代表横坐标
x,y默认直接是取你点击的div位置，你可以根据实际需要加个偏移量，比如top:${y-5}px;left:${x+10}px

另外你可以再加一个border:solid 3px; 加个边框之类的，让显示的文字更明显

CheengRui79 · 发表于 2023-8-9 16:29

<!DOCTYPE html>
<html>
<head>
<title>Copy Text</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<p id="copyText">这是一段文字</p>

<script>
      // 初始化 Clipboard.js
      var clipboard = new ClipboardJS('#copyText', {
         text: function(trigger) {
            return '哈哈哈哈哈';
         }
      });

      // 监听复制成功事件
      clipboard.on('success', function(e) {
         alert('已成功复制');
         e.clearSelection();
      });

      // 监听复制错误事件
      clipboard.on('error', function(e) {
         alert('复制失败，请手动复制文本');
      });
</script>
</body>
</html>

zucker · 发表于 2023-8-9 17:19

CheengRui79 发表于 2023-8-9 16:29
Copy Text

不知道哪里没对，我放到WordPress的里面的时候被宝塔防火墙拦截了。单独测试html可以用

CheengRui79 · 发表于 2023-8-9 17:26

zucker 发表于 2023-8-9 17:19
不知道哪里没对，我放到WordPress的里面的时候被宝塔防火墙拦截了。单独测试html可以用

这个问题涉及网络安全级及火墙的范围，我给的代码没问题，你可以提交工单，应该不难解决，相关服务商可以免费解决的

wzh123456789 · 发表于 2023-8-9 18:19

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="text">被复制的内容</div>
  <button id="copy">复制</button>

  <script>
    document.getElementById('copy').addEventListener('click', function() {
      var text = document.getElementById('text').innerText;
      var input = document.createElement('input');
      input.setAttribute('value', text);
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      alert('复制成功');
    })
  </script>
</body>
</html>

zucker · 发表于 2023-8-9 20:16

wzh123456789 发表于 2023-8-9 18:19
[mw_shl_code=html,true]

说了不要button啊

照在指尖的星光 · 发表于 2023-8-9 20:43

zucker 发表于 2023-8-9 20:16
说了不要button啊

既然做这种的行业的别人已经把代码贴了虽然不满足要求但虚心看一下是怎么实现的
全靠别人满足此时要求满足不了彼时要求
代码已经很简单了监听鼠标动作七八行代码而已
既然都知道clipboard.js了说明你还有百度的能力。

CheengRui79 · 发表于 2023-8-9 20:54

还是感觉我的代码没问题

wzh123456789 · 发表于 2023-8-9 21:47

zucker 发表于 2023-8-9 20:16
说了不要button啊

你把button改成其他也可以

帐号		自动登录	找回密码
密码			注册[Register]

[其他求助] 帮忙写下html代码，点击文字就复制内容

最佳答案

个人中心