Copy Text to Clipboard with a Simple Line of JavaScript

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. JavaScript Code
5. Conclusion
6. Preview

Copying text to the clipboard is a useful feature that enhances user experience by allowing quick and easy text copying without manual selection. With HTML, CSS, and JavaScript, you can create a simple and efficient copy-to-clipboard button.

In this guide, we’ll walk you through how to create a copy text button using minimal code. This feature is commonly used in form fields, coupon codes, and sharing links to improve usability.

Let's start making an amazing copy to clipboard button using HTML, CSS, and JavaScript step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our copy to clipboard button and text-box.

Let's go through the code step by step. The first line declares the document type as HTML. The second line begins the HTML document and sets the language to English.

The head section of the document contains metadata and links to external resources that the web page will use. The title element sets the title of the web page to "Copy Text to Clipboard." The meta element sets the character encoding to UTF-8 and the viewport to the width of the device. Finally, the link element links to an external stylesheet called styles.css that contains the styling rules for the web page.

The body section of the document contains the visible content of the web page. It begins with a div element with a class of "container," which is a common pattern used to group related content together. The h1 element sets the heading of the web page to "Copy to clipboard."

Below the heading, there is an input element with a class of "copy-text" that has a default value of codewithfaraz.com. This is the text that the user can copy to the clipboard. There is also a button element with a class of "copy-button" that the user can click to copy the text.

Finally, there is a textarea element with a class of testTextArea that serves as a placeholder for the text that the user can paste into. It has a default of four rows for the user to input the text.

After creating the files, just paste the following codes into your file. Make sure to save your HTML document with a .html extension so that it can be properly viewed in a web browser.

This is the basic structure of our copy to clipboard using HTML, and now we can move on to styling it using CSS.

Step 2 (CSS Code):

Once the basic HTML structure of the copy to clipboard page is in place, the next step is to add styling to the copy to clipboard page using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our copy to clipboard page.

Let's go through the code to understand what each part does.

The first few lines use the universal selector (*) to apply the box-sizing property to all elements on the page. This property tells the browser how to calculate the size of an element. In this case, the "border-box" value means that the element's width and height include the padding and border.

The "body" selector defines the styles for the body of the page. It sets the background color to a light pinkish color (#ebddd9) and sets some other properties like display, height, width, padding, and margin. These properties are used to center the content of the page and ensure that it takes up the full width of the viewport. The max-width property limits the width of the content to 1200 pixels on larger screens, and the text-align property aligns the text to the left.

The container selector defines the styles for a container element that holds the page content. It uses flexbox to center the content vertically and horizontally, and align-items centers the content vertically.

The h1 selector defines the styles for the main heading of the page. It sets the font size to be 3% of the viewport width, and it converts the text to uppercase.

The @media rule applies the styles within the braces to the page when the screen width is less than or equal to 768 pixels. In this case, it reduces the font size of the h1 heading and aligns the text to the center.

The input, button, and textarea selectors define the styles for form elements like input fields and buttons. They set properties like width, background color, border, and padding to create a consistent look across all form elements.

Finally, the success class defines a style that is applied to an element when an action is successful. In this case, it changes the background color of the element to a teal color (#0d8b79).

Overall, this CSS code creates a clean, responsive layout for a web page, and it provides consistent styles for form elements.

This will give our copy to clipboard button and textbox an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Step 3 (JavaScript Code):

Finally, we need to create a function for copying text into the clipboard using JavaScript.

Let's go through the code to understand what each part does.

The first two lines use the querySelector method to get references to two elements on the page: a button with a class of copy-button and an input field with a class of copy-text. These elements will be used later in the event listener.

The addEventListener method is called on the copyButton element, which listens for a click event. When the button is clicked, the function inside the parentheses is executed.

The function that's executed when the button is clicked does the following:

1. Calls the select method on the copyText element to select the contents of the input field.
2. Calls the setSelectionRange method on the copyText element to set the selection range of the input field to the first and last characters of the text.
3. Calls the execCommand method on the document object to execute the copy command, which copies the selected text to the clipboard.
4. Toggles the success class on the copyButton element to change its background color to green.
5. Changes the text inside the button to say Copied! instead of Copy.
6. Sets a timeout function that waits for two seconds and then toggles the "success" class and changes the text back to Copy.

Overall, this JavaScript code creates a function that copies the contents of an input field to the clipboard when a button is clicked. It provides visual feedback to the user by changing the button background color and text to indicate a successful copy operation.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

Conclusion:

In conclusion, copying text to the clipboard with JavaScript is a simple and useful feature to implement in web development. By following the steps outlined in this tutorial, you can easily create a button that allows users to copy text with just one click. This can greatly improve the usability of your website, especially for forms and other text-based input elements. We hope that this tutorial has been helpful and that you can apply this knowledge to your own web development projects.