How to Copy Text to the Clipboard in HTML, CSS, and JavaScript

Copying text to the clipboard is a common operation that is often used in web applications. There are several ways to do this, but the most common method is to use the document.execCommand() method with the “copy” command. This method works in most modern browsers and allows you to copy text to the clipboard with a single line of code.To use execCommand(), you first need to create a textarea element and set its value to the text you want to copy. Then, you can append the textarea to the body of the document, select its contents, and call execCommand(‘copy’). This will copy the selected text to the clipboard.

There are also a few newer methods for copying text to the clipboard, including the navigator.clipboard.writeText() method. This method is supported in modern browsers, including Chrome, Firefox, and Edge, and allows you to copy text to the clipboard with a single line of code.

Regardless of the method you choose, copying text to the clipboard is a useful and frequently used feature in web applications. Whether you’re creating a social media platform, a content management system, or any other type of web application, the ability to easily copy text can greatly improve the user experience and make it easier for users to share and interact with your application.

In the following tutorial we will be going to how do we copy text to a clipboard using JavaScript with execCommand() method. I have posted many videos and articles before related to the JavaScript project, now this the something new that we are going to build.

Video Tutorial of How to Copy Text To Clipboard in HTML CSS and JavaScript

As you have seen on the given video tutorial of Copy Text To Clipboard in HTML CSS and JavaScript, If you are feeling bored watching the given video tutorial of Copy Text To Clipboard in HTML CSS and JavaScript then you can copy or download the given codes below:

Copy Text To Clipboard in HTML CSS and JavaScript | Free Source Code

To create this program (Copy Text To Clipboard). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

In the first place, make a HTML document with the name of index.html and glue the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"href="style.css">
    <title>Copy to Clipboard</title>

    <!-- Created by S-Tech04 -->

</head>

<body>
    <div class="text-boxes">
        <div class="text-box htmlBox">
            <div class="topic">HTML Code</div>
            <textarea readonly id="HtmlCode">&lt!DOCTYPE html&gt
&lthtml lang="en"&gt
&lthead&gt
    &ltmeta charset="UTF-8"&gt
    &ltmeta name="viewport" content="width=device-width, initial-scale=1.0"&gt
    &ltscript src="https://kit.fontawesome.com/6f17055eb8.js" crossorigin="anonymous"&gt&lt/script&gt
    &ltlink rel="stylesheet" href="style.css"&gt
    &lttitle&gtButton&lt/title&gt
&lt/head&gt
&ltbody&gt
    &ltbutton  class="btn"&gt
        &ltspan class="txt"&gtBotton&lt/span&gt
        &ltspan class="round"&gt&lti class="fa fa-chevron-right"&gt&lt/i&gt&lt/span&gt
    &lt/button&gt
&lt/body&gt
&lt/html&gt
            &lt/textarea&gt
            &ltbutton id=" HtmlBtn"&gtCopy Code&lt/button&gt
        &lt/div&gt
        &ltdiv class=" text-box htmlBox"&gt
            &ltdiv class=" topic"&gtCSS Code&lt/div&gt
            &lttextarea readonly id=" CSSCode"&gt*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
button
{
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 12px 53px 12px 23px;
    color: #fff;
    background-color: #f3c40f;
    border: none;
    outline: none;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}
button span
{
    position: relative;
    z-index: 3;
}
button .round
{
    border-radius: 50%;
    width: 38px;
    height: 38px;
    position: absolute;
    right: 3px;
    top: 3px;
    background-color: #f8d23b;
    transition: all 0.3s ease-out;
    z-index: 2;
}
button .round i
{
    position: absolute;
    top: 50%;
    margin-top: -6px;
    left: 50%;
    margin-left: -4px;
    transition: all 0.3s;
}
.txt
{
    font-size: 14px;
    line-height: 1.45;
}
button:hover
{
    padding-left: 48px;
    padding-right: 28px;
}
button:hover .round
{
    width: calc(100% - 6px);
    border-radius: 30px;
}
button:hover .round i
{
    left: 12%;
}
            </textarea>
            <button id="CSSBtn">Copy Code</button>
        </div>
    </div>
    <script>
        const HtmlBtn = document.getElementById('HtmlBtn');
        const HtmlCode = document.getElementById('HtmlCode');
        HtmlBtn.addEventListener('click', () => {
            HtmlCode.select();
            document.execCommand('copy');
            HtmlBtn.innerHTML = "Code Copied";
        });
        const CSSBtn = document.getElementById('CSSBtn');
        const CSSCode = document.getElementById('CSSCode');
        CSSBtn.addEventListener('click', () => {
            CSSCode.select();
            document.execCommand('copy');
            CSSBtn.innerHTML = "Code Copied";
        })
    </script>
</body>

</html>

Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;900&amp;display=swap');
*
{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}
body
{
   min-height: 100vh;
   width: 100%;
   background: #fdfcfc;
}
::-webkit-scrollbar
{
   width: 10px;
   background: #d3defa;
}
::-webkit-scrollbar-thumb
{
   height: 80px;
   background: #265df2;
   background-clip: content-box;
   border-radius: 12px;
   transition: background 0.4s;
}
::-webkit-scrollbar-thumb:hover
{
   background: #0e4bf1;
}
.text-boxes
{
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
   padding: 0 30px;
   margin-bottom: 50px;
}
.text-boxes .text-box
{
   height: 380px;
   max-width: 660px;
   width: 100%;
   margin: 55px 0;
}
.text-boxes .text-box .topic
{
   font-size: 18px;
   font-weight: 600;
   color: #265df2;
   margin: 4px;
   width: 100%;
}
.text-boxes .text-box textarea
{
   display: block;
   height: 100%;
   width: 100%;
   padding: 30px;
   font-size: 15px;
   font-weight: 400;
   outline: none;
   border: 1px solid #265df2;
   border-radius: 8px;
   background: #e7edfe;
   overflow-x: scroll;
   overflow-wrap: inherit;
}
.text-boxes .text-box textarea::-webkit-scrollbar
{
   display: none;
}
.text-boxes .text-box button
{
   display: block;
   height: 45px;
   width: 155px;
   background: #265df2;
   margin: 8px 0px;
   color: #fff;
   font-size: 17px;
   font-weight: 400;
   outline: none;
   border: none;
   border-radius: 3px;
   cursor: pointer;
   transition: all 0.5s;
}
.text-boxes .text-box button:hover
{
   background: #0e4bf1;
}
@media(max-width: 400px)
{
   .text-boxes .text-box button
   {
      width: 100%;
   }
}

Congratulations, you have now created a program that copies text to the clipboard using HTML, CSS, and JavaScript. If you encounter any errors or issues with your code, you can download the source code files by clicking the download button below. The source code is available for free in a .zip file, which you can extract after downloading.

Click on the following download button to download all source code files.

Download Now

Please Wait...

Direct Link Click Here