If you are performing in a web development inputs or text area, you might want to create a button like (Copy to Clipboard) to copy all contents/code of input to the user’s clipboard for doing it better for UI.
Copy to Clipboard is a feature in which we temporarily store the data (programs, text, images, etc) to the clipboard (holding place on the device). And the copied data persists till we copy the other data to the clipboard. And We are using codes for different types like creating web pages, developing applications, etc. In our applications sometimes we need to add a feature copy to the clipboard for ease of application.
So in this article, I have given examples of how we can create copy-to-clipboard functionality with the most suitable look by using some codes. Let’s see.
Copy to Clipboard Button
HTML Code:
<div class="soft-text">
<div class="text-box HTML">
<div class="soft">Program:</div>
<textarea id="HTML" readonly >
<div class="soft-text">
<div class="text-box HTML">
<div class="soft">HTML Code:</div>
<textarea id="HTML" readonly >
Soft CodeOn
</textarea>
<button id="HTMLButton">Copy Codes</button>
</div>
</textarea>
<button id="HTMLButton">Copy Code</button>
</div>
</div>CSS Code:
<style>
/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;}
.soft-text{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;}
.soft-text .text-box{
height: auto;
max-width: auto;
width: 100%;
margin: 5px 0;}
.soft-text .text-box .soft{
font-size: 18px;
font-weight: 600;
color: #1ab1e8;
margin: 4px;}
.soft-text .text-box textarea{
height: 100%;
width: 100%;
padding: 20px;
font-size: 15px;
font-weight: 400;
outline: none;
border: 1px solid #1ab1e8;
border-radius: 8px;
background: #ceccf0;}
.text-box textarea::-webkit-scrollbar{
display: none;}
.soft-text .text-box button{
height: 45px;
width: 155px;
color: #fff;
background: #0f06bd;
outline: none;
border: none;
border-radius: 8px;
font-size: 17px;
font-weight: 400;
margin: 8px 0;
cursor: pointer;
transition: all 0.4s ease;}
.soft-text .text-box button:hover{
background: #0e4bf1;}
@media (max-width: 400px) {
.soft-text .text-box button{
width: 100%; }}</style>JavaScript Code:
<script>
// HTML BOx JS Code
let HTML = document.getElementById("HTML");
let HTMLButton = document.getElementById("HTMLButton");
HTMLButton.onclick = function() {
HTML.select();
document.execCommand("copy");
HTMLButton.innerText = "Copied!"
}
</script>All Done. Now you just need to copy the above code HTML, CSS & Javascript code and paste it where you want to show text/code/content to your web page. If you face any difficulty with the code please contact us.