How to ‘Copy to Clipboard’ with Bootstrap’s `user-select-all.

Miguel Á. Padriñán

Copying text to the clipboard is a common functionality in web applications, allowing users to easily share or save information.

In this article, we’ll explore a simplified approach to copying text to the clipboard using the Bootstrap class user-select-all. By leveraging this class and a few lines of JavaScript code, we can enhance user experience and streamline the process of copying text.

Let's dive in!

Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. Additionally, ensure that you have included the Bootstrap framework in your project, as we’ll be utilizing the user-select-all class provided by Bootstrap.

Step 1: Setting up the HTML Markup

To enable the copy functionality, we need to structure our HTML markup in a way that incorporates the user-select-all class.

Here's an example:

<p class=”user-select-all”>Text to be copied to clipboard</p>
<button onclick=”copyToClipboard()”>Copy to Clipboard</button>

In the above code snippet, we have a paragraph element with the user-select-all class applied to it. This class ensures that when the user clicks on the paragraph, its entire content is selected. Additionally, we have a button that triggers the copyToClipboard() function when clicked.

Step 2: Implementing the copyToClipboard Function

Now, let’s write the JavaScript function responsible for copying the selected text to the clipboard.

Here’s the simplified version of the function:

const copyToClipboard = async () => {
  try {
    const element = document.querySelector(".user-select-all");
    await navigator.clipboard.writeText(element.textContent);
    // Optional: Provide feedback or perform additional actions upon successful copy
  } catch (error) {
    console.error("Failed to copy to clipboard:", error);
    // Optional: Handle and display the error to the user
  }
};

The copyToClipboard function performs the following steps:

1. Retrieves the element with the user-select-all class using document.querySelector().
2. Uses the navigator.clipboard.writeText() method to write the text content of the element to the clipboard.
3. (Optional) You can provide feedback or perform additional actions upon successful copy.
4. (Optional) Handles and displays any errors that occur during the copy process.

Step 3: Enhancing User Experience

To enhance the user experience, you can add visual cues or notifications to indicate successful copying or any errors that may occur.

For example, you can update the copyToClipboard function to display a success message when the text is successfully copied:

const copyToClipboard = async () => {
  try {
    const element = document.querySelector(".user-select-all");
    await navigator.clipboard.writeText(element.textContent);
    console.log("Text copied to clipboard!");
    // Optional: Display a success message to the user
  } catch (error) {
    console.error("Failed to copy to clipboard:", error);
    // Optional: Display an error message to the user
  }
};

By leveraging the power of Bootstrap’s user-select-all class and a few lines of JavaScript code, we can easily implement a simplified text copy to clipboard functionality in our web applications. This approach provides a seamless and intuitive user experience, allowing users to effortlessly copy and share information.

Feel free to experiment and customize the code further to suit your specific needs but do remember to test your implementation across different browsers to ensure compatibility and provide graceful fallbacks.