This instance script in JavaScript is to repeat textual content to the system clipboard. I’m presenting three completely different strategies on this tutorial.
- By way of ClipBoard API.
- Utilizing doc.executeCommand (not beneficial).
- By person consent.
This JS fast instance makes use of the primary and the perfect methodology to repeat content material of a textarea to the clipboard.
Fast instance
var contentToCopy = doc.getElementById(text_to_copy).worth;
navigator.clipboard.writeText(contentToCopy).then(perform() {
console.log('Copied to clipboard with async.');
}, perform(err) {
console.error('Unable to repeat with async ', err);
});
HTML textarea factor from the place the content material is copied by the JS script.
<textarea id="text_to_copy">Textual content to repeat</textarea>
1) Utilizing The Clipboard API
Under HTML script provides an interface with a textarea and a button to set off the copy motion.
On clicking the button to name the JavaScript copyToClipBoard() perform. This perform strikes the textarea content material to the clipboard.
index.html
<html>
<head>
<title>JavaScript Copy Textual content to Clipboard</title>
<script src="https://phppot.com/javascript/javascript-copy-clipboard/copy-clipboard-async.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="nameless"></script>
<hyperlink rel="stylesheet" href="model.css" kind="textual content/css" />
<hyperlink rel="stylesheet" href="kind.css" kind="textual content/css" />
</head>
<physique>
<div class="phppot-container">
<h1>JavaScript Copy Textual content to Clipboard</h1>
<div class="row">
<div class="message-input">
<label for="message-input">Message: </label>
<textarea id="message-input" rows="15"
identify="message-input" class="message-input"></textarea>
</div>
</div>
<div class="row">
<button onclick="copyToClipboard('message-input')"
kind="button">Copy to clipboard</button>
</div>
<div class="row">
<div id="copied"></div>
</div>
</div>
</physique>
</html>
This JS script writes the textual content to the clipboard by calling clipboard.writeText(). It enhances the fast instance by offering an interface to repeat content material by way of ClipBoard API.
copy-clipboard-async.js
/**
* to repeat to the clipboard utilizing the Clipboard API
*
* @param factor
* @returns
*/
perform copyToClipboard(factor) {
var contentToCopy = doc.getElementById(factor).worth;
navigator.clipboard.writeText(contentToCopy).then(perform() {
console.log('Copied to clipboard with async.');
}, perform(err) {
console.error('Unable to repeat with async ', err);
});
}
2) doc.execCommand
This methodology was extensively used to repeat content material by calling the executeCommand(“copy”). It’s deprecated however nonetheless supported by many browsers.
It dynamically appends the textarea factor to the HTML physique and selects its content material utilizing JavaScript. Then the executeCommand() perform name triggers the copy motion.
copy-clipboard-execcommand.js
/**
* to repeat to the clipboard utilizing the doc.execCommand
*
* @param factor
* @returns
*/
perform copyToClipboard(factor) {
var contentToCopy = doc.getElementById(factor).worth;
var temp = $("<textarea>");
$("physique").append($temp);
temp.val(contentToCopy);
temp.choose();
doc.execCommand("copy");
temp.take away();
console.log('Copied!');
}
3) Copy by person
That is the most secure methodology of copying the content material to the clipboard. This doesn’t use any native perform of the JavaScript and will be described extra of a course of. It prompts the person to substantiate copying the chosen content material to the clipboard.
copy-by-user-consent.html
<html>
<head>
<title>JavaScript Copy Textual content to Clipboard</title>
</head>
<physique>
<!-- On this model, we current the management to the tip person to repeat. -->
<!-- Textual content to be copied is proven to the person and he makes use of the built-in browser's function and copies to the clipboard. -->
<!-- If that is attainable to make use of in your use case, then that is the most secure methodology. -->
<button id="copy-btn"
onclick="copyToClipboard(doc.getElementById('copy-btn').innerHTML)">Textual content
to repeat.</button>
<script>
perform copyToClipboard(textual content) {
window.immediate("Press Ctrl+C to repeat to clipboard.",
textual content);
}
</script>
</physique>
</html>
