时间戳

首页 > 解决方案 > javascript/css - 防止在 span 中复制文本

javascript - javascript/css - 防止在 span 中复制文本

问题描述

考虑以下 html：

<p class="chorus show-chords">
<span class="chord">ré69</span>Estava à toa na vida <span class="chord">lá7</span><br>
O meu amor me chamou <span class="chord">Fá#m7</span><br>
Pra ver a ban<span class="chord">si7</span>da passar<span class="chord">mi7(9)</span><br>
Cantando coi<span class="chord">lá7</span>sas de amor.
</p>

这是带有吉他和弦的歌曲 (A Banda - Chico Buarque) 的第一节。使用我的 CSS，它看起来像这样：

html输出示例

但是，如果我选择文本并在将其粘贴到 Word 时执行 Ctrl+C，我会得到：

复制粘贴到单词的示例

现在我明白了我不应该期望得到与 HTML 相同的结果，所以我想在复制时简单地扔掉和弦。我希望在<span>定义中有一些东西可以防止和弦的文本被复制，所以我转向了，oncopy=""但这没有用。为了澄清，我希望做一个复制粘贴会产生这个：

结果没有和弦

我尝试通过将以下代码添加到p.show-chords span定义中来阻止选择：

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

虽然这使得和弦的文本无法选择，但它并没有阻止和弦被复制。

有什么办法可以做到这一点？

工作示例： https ://jsfiddle.net/d52xjqca/

标签： javascriptcss

解决方案

推荐阅读