This a small JS library to execute clipboard functions in a fast and easy way.
See the demo here: https://assisfery.github.io/CopyPasteJS/index.html
Github repository: https://github.com/assisfery/CopyPasteJS
CDN repository: https://www.jsdelivr.com/package/gh/assisfery/CopyPasteJS
NPM repository: https://www.npmjs.com/package/copypastejs
Just import the src/CopyPasteJS.js file in your document.
<script src="src/CopyPasteJS.js"></script>
This file is hosted in CDN JSDelivr.
<script src="https://cdn.jsdelivr.net/gh/assisfery/CopyPasteJS@1.2/src/CopyPasteJS.min.js"></script>
Or you can get it using NPM repository.
npm i copypastejs
To copy data from a input element just add data-copy-origin="#element" attribute to the button.
<button class="btn btn-success" data-copy-origin="#txtCopy">Copy</button>
To copy text to clipboard data-copy-text="text" attribute to the button.
<button class="btn btn-success" data-copy-text="Some text">Copy</button>
To copy text to clipboard from a html element just include data-copy-text="text" attribute to the button.
<button class="btn btn-success" data-copy-origin="#element">Copy</button>
To paste data to a input element just add data-paste-target="#element" attribute to the button.
<button class="btn btn-success" data-paste-target="#txtPaste">Paste</button>
To cut data from a input element just add data-cut-origin="#element" attribute to the button.
<button class="btn btn-success" data-cut-origin="#txtCut">Cut</button>
To copy and paste data from a input element to another just add data-copy-origin="#element" and data-paste-target="#element" attributes to the button.
<button class="btn btn-success"
data-copy-origin="#txtCopy2"
data-paste-target="#txtPaste2">Copy and Paste</button>
After data is been copied if you want to execute a function just add data-copy-callback="jscode()" attribute to the button.
<button class="btn btn-success" data-copy-origin="#txtCopy3" data-copy-callback="alert('copied')">Copy and Callback</button>
After data is been pasted if you want to execute a function just add data-paste-callback="jscode()" attribute to the button.
<button class="btn btn-success" data-paste-target="#txtPaste3" data-paste-callback="alert('pasted')">Paste and Callback</button>
You can do all those actions in JavaScript code.
CopyPasteJS.copyText("Text copied in JS");
CopyPasteJS.copyText("Text copied in JS and Callback triggered", function(){
alert("Yes its done");
});
CopyPasteJS.copyFrom("#txtCopy4");
// OR USE CALLBACK
CopyPasteJS.copyFrom("#txtCopy4", function(){
alert(123);
});
CopyPasteJS.pasteTo("#txtPaste4");
// OR CALL A FUNCTION
CopyPasteJS.pasteTo("#txtPaste4", function(){
alert("I fell amazing");
});
CopyPasteJS.cutFrom("#txtCut2");
// OR CALL A FUNCTION
CopyPasteJS.cutFrom("#txtCut2", function(){
alert("I fell amazing");
});