Consider the following 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>
This is the first verse of a song (A Banda - Chico Buarque) with guitar chords. With my css it looks like this:
However, If I select the text and do Ctrl+C when I paste it in Word I get:
Now I understand that I shouldn't expect to get the same as in the HTML, so I would like to simply throw away the chords when copying. My hope was to have something in the <span> definition that would prevent the text of the chord from being copied, so I turned to oncopy="" but this didn't work. To clarify, I was hoping that doing a Copy-paste would yield this:
I tried preventing the selection by adding the following code to the p.show-chords span definition:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
And while this made the text of the chords unselectable, it didn't prevent the chords to be copied over.
Is there any way to achieve this?
Working example: https://jsfiddle.net/d52xjqca/
