This time, we will introduce how to use the very useful library “clipboard.js” for web developers to copy text to the clipboard.
This is a tool that allows you to easily copy text to the clipboard with just one click, making it very helpful for improving user convenience.
In this article, we will explain the specific implementation method using CSS, HTML, and JavaScript code examples.
CSS Settings
First, let’s set up basic CSS styles to make the buttons and text areas easier to read.
This is the CSS description for the clickable button (button) and the text area to be copied (#dvtxt, input).
Please refer to the following code. You can customize the style as needed.
<style>
body{
padding: 0;
margin: 0;
text-align: center;
font-size: 16px;
}
h1{
font-size:20px;
line-height:1.6em;
text-align:center;
padding: 15px 0 25px 0;
}
#dvtxt{
font-size: 18px;
}
input{
padding: 8px;
margin: 0 0 10px 0;
width: 250px;
margin: 0 auto;
}
button{
margin: 15px;
padding: 4px;
}
</style>
HTML Structure
Next, let’s set up the button and text area in HTML. Here, we’ll use div and input tags to create buttons that copy each text to the clipboard.
Prepare the clickable button (button) and the text area to be copied (“id=’dvtxt’” and “input”). The text area contains the text that will be copied to the clipboard.
For the button (button), specify the attributes “data-clipboard-action=’copy or cut’” and “data-clipboard-target=’target text area’”.
Refer to the following code:
<h1>Copy text to the clipboard using clipboard.js.<br>Clicking the two buttons below will copy the target text of the button to the clipboard.</h1>
<div id="dvtxt">Text inside the div tag</div>
<button
class="btndiv"
data-clipboard-action="copy"
data-clipboard-target="#dvtxt"
>
Copy text from div tag
</button>
<br>
<br>
<br>
<input id="inpttxt" type="text" value="Text inside the text box" /><br>
<button
class="btninput"
data-clipboard-action="copy"
data-clipboard-target="#inpttxt"
>
Copy text from text box
</button>
JavaScript Settings
Finally, load clipboard.js with JavaScript and configure the process to copy text according to the button click events.
Use the following code to initialize clipboard.js and define the actions for success and failure when copying.
Declare new ClipboardJS(‘click button’) and write clipboard_div.on(‘success or error’, function (e) { … }).
<script src="clipboard.min.js"></script>
<script type="text/javascript">
var clipboard_div = new ClipboardJS('.btndiv');
clipboard_div.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard_div.on('error', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
var clipboard_input = new ClipboardJS('.btninput');
clipboard_input.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard_input.on('error', function (e) {
console.log(e);
});
</script>
Demo Page: Copy Text to Clipboard Using clipboard.js
A working demo page is available. Please check it out via the link below.
Demo page for copying text to the clipboard using clipboard.js
Source: clipboard.js
If you’d like to learn more about additional features or detailed information, please refer to the official website.
Summary
That’s how to copy text to the clipboard using clipboard.js.
Although it’s a simple implementation, it can significantly improve the user experience.
Be sure to try using it in your own projects.
*Please use it at your own risk when reusing this code.
Do not reuse the Google Analytics tag included in the demo page’s head tag.
