Copy hidden text equal to Whatsapp

Question

Hello, a situation that I need to do and could not use normal methods like "display: None, user-select: all" etc, is to copy hidden texts or hidden tags.

If you open the web Whatsapp, you will see that when you copy a message, the NAME + DATE TIME appears in front of each copied message. This would be the intention to be done.

We have a chat today, but we show name + date and time, and this ends up getting visually strange in our system. We’d like to hide this and show it only by copying.

Does anyone have any idea what the possibility or how to do something of this kind?

Answer 1

Has a hakezinho that you can do... only has a "problem" the person has to copy the text to the end, if it does not pick up the whole text will not catch the date and time that are hidden at the end of the text... Like, if the person only takes a piece of the middle of the message will not pick up the date and time. See the gif below to better understand.

What I did was put the color transparent and decrease the size of the text with the letter-spacing. So if the person selects everything by dragging, or clicking 3x will pick up the minutes/time, select from the end pro start picks up tb. Only it does not get date/time if the person only selects a piece of the beginning or middle of the text.

Test yourself...

.box {
    position: relative;
    width: 200px;
    border: 1px solid #000;
}

.box .txt {
    position: relative;
    display: inline-block;
}

.box .data {
    color: rgba(0, 0, 0, 0);
    letter-spacing: -7px;
    display: inline-block;
}

<div class="box">
    <span class="txt">
        Lorem ipsum dolor sit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, dignissimos.
        <span class="data"> 24/08/19 8:20</span>
    </span>
</div>

OBS: Hiding text is considered a practice of black hat by Google, do not use this to hide key words and other things, Google can penalize you for it... Use only on your chat system if you want.