Some websites now use a JavaScript service from Tynt that appends text to copied content.
If you copy text from a site using this and then paste you get a link to the original content at the bottom of the text.
Tynt also tracks this as it happens. It's a neat trick well done.
Their script for doing this is impressive - rather than try to manipulate the clipboard (which only older versions of IE lets them do by default and which should always be turned off) they manipulate the actual selection.
So when you select a block of text the extra content is added as a hidden <div>
included in your selection. When you paste the extra style is ignored and the extra link appears.
This is actually fairly easy to do with simple blocks of text, but a nightmare when you consider all the selections possible across complex HTML in different browsers.
I'm developing a web application - I don't want anyone to be able to track the content copied and I would like the extra info to contain something contextual, rather than just a link. Tynt's service isn't really appropriate in this case.
Does anyone know of an open source JavaScript library (maybe a jQuery plug in or similar) that provides similar functionality but that doesn't expose internal application data?
Select the text or graphics you want to copy, and press Ctrl+C. Each selection appears in the Clipboard, with the latest at the top. Optionally, repeat step 2 until you've copied all the items you want to use. Tip: After you open the Clipboard, it stores content that you copy or cut from anywhere.
Go to File > Options > Advanced. Under Cut, copy, and paste, select the down arrow for the setting to change . Pasting within the same document When you paste content into the same document from which you copied the content. Pasting between documents When you paste content that was copied from another Word document.
Copy and paste multiple items using the Office ClipboardSelect the first item that you want to copy, and press CTRL+C. Continue copying items from the same or other files until you have collected all of the items that you want.
To paste text, place your cursor in the appropriate location and press the keyboard shortcut key combination Ctrl + V , or right-click where you want to paste the text and click Paste.
More complex solution that handles rich text formatting. The 2020 solution is still relevant if you only deal with plain text.
const copyListener = (e) => { const range = window.getSelection().getRangeAt(0), rangeContents = range.cloneContents(), pageLink = `Read more at: ${document.location.href}`, helper = document.createElement("div"); helper.appendChild(rangeContents); event.clipboardData.setData("text/plain", `${helper.innerText}\n${pageLink}`); event.clipboardData.setData("text/html", `${helper.innerHTML}<br>${pageLink}`); event.preventDefault(); }; document.addEventListener("copy", copyListener);
#richText { width: 415px; height: 70px; border: 1px solid #777; overflow: scroll; } #richText:empty:before { content: "Paste your copied text here"; color: #888; }
<h4>Rich text:</h4> <p>Lorem <u>ipsum</u> dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.</p> <h4>Plain text editor:</h4> <textarea name="textarea" rows="5" cols="50" placeholder="Paste your copied text here"></textarea> <h4>Rich text editor:</h4> <div id="richText" contenteditable="true"></div>
Solution that works on all recent browsers.
Note that this solution will strip rich text formatting (such as bold and italic), even when pasting into a rich text editor.
document.addEventListener('copy', (event) => { const pagelink = `\n\nRead more at: ${document.location.href}`; event.clipboardData.setData('text/plain', document.getSelection() + pagelink); event.preventDefault(); });
Lorem ipsum dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.<br/> <textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>
There are two main ways to add extra info to copied web text.
The idea is to watch for the copy event
, then append a hidden container with our extra info to the dom
, and extend the selection to it.
This method is adapted from this article by c.bavota. Check also jitbit's version for more complex case.
function addLink() { //Get the selected text and append the extra info var selection = window.getSelection(), pagelink = '<br /><br /> Read more at: ' + document.location.href, copytext = selection + pagelink, newdiv = document.createElement('div'); //hide the newly created container newdiv.style.position = 'absolute'; newdiv.style.left = '-99999px'; //insert the container, fill it with the extended text, and define the new selection document.body.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function () { document.body.removeChild(newdiv); }, 100); } document.addEventListener('copy', addLink);
The idea is to watch the copy event
and directly modify the clipboard data. This is possible using the clipboardData
property. Note that this property is available in all major browsers in read-only
; the setData
method is only available on IE.
function addLink(event) { event.preventDefault(); var pagelink = '\n\n Read more at: ' + document.location.href, copytext = window.getSelection() + pagelink; if (window.clipboardData) { window.clipboardData.setData('Text', copytext); } } document.addEventListener('copy', addLink);
This is a vanilla javascript solution from a modified solution above but supports more browsers (cross browser method)
function addLink(e) { e.preventDefault(); var pagelink = '\nRead more: ' + document.location.href, copytext = window.getSelection() + pagelink; clipdata = e.clipboardData || window.clipboardData; if (clipdata) { clipdata.setData('Text', copytext); } } document.addEventListener('copy', addLink);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With