You are currently viewing Copy Text to Clipboard using HTML ,CSS & JavaScript

Copy Text to Clipboard using HTML ,CSS & JavaScript

Copy Text to Clipboard using HTML ,CSS & JavaScript

Hello everyone. Welcome to today’s tutorial. We’ll Learn How To Copy Data From An Input Field To The Clipboard In Today’s Session. We Will Use Html, Css, And Javascript  To Complete This Copy To Clipboard Project. Sometimes you want to include the copy feature while creating advanced web pages and applications. Instead of selecting the text and pressing a few keys on the keyboard, this enables your users to copy text by clicking a button or icon.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

HTML Code for Clipboard

<html>
<head>
    <title></title>
</head>
<body>
    <button>Click to copy to clipboard</button>
</body>
</html>

In this HTML Code we have just created a button which will display to copy the content for the user clipboard. Let us style or we can align because there is not something vast in the HTML Code so let us align the defined attributes using CSS.

How To Create OTP Input Field Using HTML , CSS &#038; Javascript

CSS Code for Clipboard

.copy-notification {
        color: #ffffff;
        background-color: rgba(0,0,0,0.8);
        padding: 20px;
        border-radius: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 150px;
        margin-top: -30px;
        margin-left: -85px;
        display: none;
        text-align:center;
    }

In this CSS code we have just set the a toast message which will notify us that the content is copied to the clipboard successfully so for that we have just styled that toast message using CSS with some font color and alignment so that it should display properly. Let us code the JavaScript part to make it user responsive.

50+ Html ,Css & Javascript Projects With Source Code

JavaScript Code for Clipboard

$(document).ready(function () {
            $("button").click(function (event) {
                event.preventDefault();
                CopyToClipboard("This is some test value.", true, "Value copied");
            });
        });

        function CopyToClipboard(value, showNotification, notificationText) {
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val(value).select();
            document.execCommand("copy");
            $temp.remove();

            if (typeof showNotification === 'undefined') {
                showNotification = true;
            }
            if (typeof notificationText === 'undefined') {
                notificationText = "Copied to clipboard";
            }

            var notificationTag = $("div.copy-notification");
            if (showNotification && notificationTag.length == 0) {
                notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
                $("body").append(notificationTag);

                notificationTag.fadeIn("slow", function () {
                    setTimeout(function () {
                        notificationTag.fadeOut("slow", function () {
                            notificationTag.remove();
                        });
                    }, 1000);
                });
            }
        }

In this JavaScript code we have defined the content which should be copy to the user clipboard and a toast message which will indicate that it is copied successfully. And then we have defined some if statement to make sure that while copying the content to the clipboard there must be no error and it matches the user needs. And lastly we have defined that when will the toast message disappear. Let us see the final output of the project.

10+ Javascript Projects For Beginners With Source Code

Final Output Copy Text to Clipboard using HTML ,CSS & JavaScript


We have Successfully created our How to make copy to clipboard using HTML CSS & JS | jQuery Copy To Clipboard. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – @harshh9

Leave a Reply