jQuery plugin to add links to the clipboard
Many of us have blogs, online stores, news sites etc ... It’s clear that we try to publish original content, but what happens after the content appears on the Internet, it is viewed of course, and if it’s interesting, users sometimes exchange a link to a page with content. New transitions to the desired page and we are very good, but what if our excellent text was simply copied and dropped off at Skype / Skype \ mail - our text is gone, but there is no transition :(.
To prohibit copying is very wrong, fun and funny ©, but we can add a link to our clipboard when copying. Consider how we better do it:
')
- Write an event handler for CTRL + C, "Copy", will have to work with the clipboard, and it does not work with it in modern browsers.
- Use crutches in the form of flash. Also not very, +1 dependency, and in version 10 to copy to the buffer you need to click on the flash drive interface.
- And what if we look at what the user selects with the cursor and carefully slip our link, hehe heh, I wrote this article to implement this method.
It all works like a jQuery plugin.
Create an element based on the initialization of the plug-in, which we will slip to copy-paste.
If kopipaster selected text, then add our link to the selected text.
With the new mousedown, we will clean the old copyright element with a link.
Naturally the link should not be visible, we add the necessary design for it:
How to use:
- Plugin: Download addtocopy
Example: here
Known bugs:
In Opera, text is highlighted from left to right.
In Firefox, if addcopyfirst: true, then text is not highlighted for the first time.
To prohibit copying is very wrong, fun and funny ©, but we can add a link to our clipboard when copying. Consider how we better do it:
')
- Write an event handler for CTRL + C, "Copy", will have to work with the clipboard, and it does not work with it in modern browsers.
- Use crutches in the form of flash. Also not very, +1 dependency, and in version 10 to copy to the buffer you need to click on the flash drive interface.
- And what if we look at what the user selects with the cursor and carefully slip our link, hehe heh, I wrote this article to implement this method.
It all works like a jQuery plugin.
Create an element based on the initialization of the plug-in, which we will slip to copy-paste.
var options = {htmlcopytxt: '<br>More: <a href="' +window.location.href+ '">' +window.location.href+ '</a>' , minlen:25, addcopyfirst: false}
$.extend(options, usercopytxt);
var copy_sp = document .createElement( 'span' );
copy_sp.id = 'ctrlcopy' ;
copy_sp.innerHTML = options.htmlcopytxt;
If kopipaster selected text, then add our link to the selected text.
$( this ).mouseup( function (){
if (window.getSelection){ //
selected=window.getSelection();
seltxt=selected.toString();
nslct = selected.getRangeAt(0);
seltxt = nslct.cloneRange();
seltxt.collapse( false );
seltxt.insertNode(copy_sp);
nslct.setEndAfter(copy_sp);
selected.removeAllRanges();
selected.addRange(nslct);
} else if ( document .selection){ //
selected = document .selection;
nslct=selected.createRange();
seltxt=nslct.text;
seltxt=nslct.duplicate();
seltxt.collapse( false );
seltxt.pasteHTML(copy_sp.outerHTML);
nslct.setEndPoint( "EndToEnd" ,seltxt);
nslct.select();
}
});
With the new mousedown, we will clean the old copyright element with a link.
$( this ).mousedown(function(){
$( '#ctrlcopy' ).remove();
});
Naturally the link should not be visible, we add the necessary design for it:
< style >
#ctrlcopy {
height:1px;
overflow:hidden;
position:absolute;
width:1px;
margin: 5px 0 0 -1px;
line-height:0;
opacity: 0;
}
</ style >
How to use:
- Plugin: Download addtocopy
<script type= "text/javascript" >
$( function (){
$( "#content" ).addtocopy({htmlcopytxt: '<br>: <a href="' +window.location.href+ '">' +window.location.href+ '</a>' , minlen:35, addcopyfirst: false});
});
</script>
Options handled by the plugin:
| Option | Description |
| htmlcopytxt | what to add to the copied to the buffer, takes html |
| minlen | the minimum length of the selected text takes int |
| addcopyfirst | add htmlcopytxt to the beginning of the clipboard or to the end, true / false |
Example: here
Known bugs:
In Opera, text is highlighted from left to right.
In Firefox, if addcopyfirst: true, then text is not highlighted for the first time.
Source: https://habr.com/ru/post/101763/
All Articles