Using Javascript to dynamically copy text to the clipboard

Is there a way to create a function that can automatically copy the current URL in the address bar to the clipboard?

Before jumping to conclusions, hear me out:

I'm looking for a solution where the copying process happens dynamically, not just when triggered by the user (contrary to some suggestions found here: How do I copy to the clipboard in JavaScript?)

So far, I've been using this method:

function copyAddressBarToClipboard() {  
    var input = document.createElement('input');
    document.body.appendChild(input);    
    input.value = window.location.href;    
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);   
}

<button onclick="copyAddressBarToClipboard()">copyAddressBarToClipboard</button>

However, it appears that the document.execCommand function is considered obsolete (https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand), prompting me to seek a more suitable alternative.

Answer №1

Great question! I have a simple script here that utilizes the clipboard API. Just a reminder, the clipboard API has been available since Chrome 66.

HTML

<input id="text" value="Hello Clipboard">
<button id="copyBtn"& gt;Copy Text</button>

JS

document.querySelector('#copyBtn').addEventListener('click', () => {
  navigator.clipboard.writeText(document.querySelector('#text').value)
    .then(() => {
      alert('Text copied successfully.');
    })
    .catch(() => {
      Alert('Copy failed');
    });
});

I hope this is helpful and provides some insight!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to generate objects dynamically as the program is running?

Looking at the code snippet below, I currently have an array containing two JSON objects. However, if I need to create 20 objects, is there a more efficient way than manually writing each object in the array? Furthermore, is it possible to generate these o ...

How to return a variable to Express when clicking a button?

Imagine having a list of 10 elements, each with a unique id as their name, and the user has the ability to add more items to the list at any time. If I were to click on an element, my goal is to have Express retrieve the id of that specific element. If it ...

What is the best way to customize the style using a CSS class?

Is it possible to alter a specific style with a CSS class using jQuery or JavaScript? For example, if the HTML looks like this: <tab> <a class="anchor">a</a> </tab> And the CSS looks like this: a {border:1px} .anchor {color: ...

Challenges faced when dealing with MongoDB and the latest version of webpack

Struggling to navigate MongoDB and React.js, encountering issues with MongoDB dependencies. Here are the dependencies listed in package.json: "dependencies": { "dotenv": "^16.3.1", "mongodb": "^4.1.0", &qu ...

Efficient method of delivering cohesive information from database to user without the need for continuous querying

Within the database, there is stored data about each user that typically remains constant. However, occasionally a user may update their information, such as changing their name. This data includes the user's name, username, and company details. The ...

Using Grails, the event listener can be triggered by a change in the

Looking for some advice on implementing a dynamic textfield element in a Grails form. I'm using the remoteFunction action to call a template, but unfortunately, the template is not being called as expected. When I switch from "g:textField" to "g:selec ...

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

Among my json data, I have a list of all inventories: { "status": true, "data": [ { "inv_id": 1, "name": "Arts" }, { "inv_id": 2, "name": "web" }, { "inv_id": 3, "name": "mobileapp" }, { "inv_id": 4, "name": "ws" }, { "inv_id": 5, ...

Adding page numbers in a select dropdown menu without using the traditional next and previous buttons

I am attempting to implement a select tag paging feature using the code below: <select ng-change="params.page(page)" ng-model="page" ng-options="page.number as page.number for page in pages"></select> However, I noticed that when I incorporat ...

Utilizing jQuery.post to generate a dynamic dropdown menu

I recently designed a dropdown list that functions well on a standalone page. However, I encountered an issue when attempting to display it in a table on another page using jQuery.post(). The contents appear to overflow from the dropdown list. The jQuery ...

Defeat a JavaScript function or turn it into a Singleton Function

Is there a method to stop a running JavaScript function? Or is there a way to make sure that only one instance of the function runs at a time and any previous instances are removed upon restart? For example, if I call: _.defer(heavyDutyPaint); //How ca ...

What is the best way to transfer variables defined in PHP to JavaScript?

Can the variables previously defined in JavaScript be used in the line that starts with $sql =? var southWestLat = map.getBounds().getSouthWest().lat(); var southWestLng = map.getBounds().getSouthWest().lng(); var northEastLat = map.getBounds().getNort ...

Creating a dynamic progress bar that scrolls for multiple elements

I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read. For reference, something similar can be seen on this site. I have created my custom progress bar and coded it on fiddle, whe ...

Fixed: Transmitting user's verified email from website to chrome extension

I am currently in the process of developing a website named websiteA using Laravel 8 and Vuejs, along with a Chrome extension that utilizes JavaScript for web scraping. This extension is designed to extract content from another websiteB, and my goal is to ...

Having difficulty integrating a Hangout button using APIs on my webpage

I'm having some trouble adding a basic Hangout button component to initiate Google's Hangout. I've been following the steps outlined on the Google Developer page, but despite my efforts, I can't seem to resolve the following issue: Fai ...

Using Vue Router to set a variable as a key for an object in JavaScript

In my current project, I am attempting to pass a variable as the parameter to vue-router in order to dynamically set it. The code snippet below demonstrates what I am trying to achieve: <router-link :to="{ name: notification.name, (notification.pa ...

Tips for ensuring the drop down button remains selected

My goal is to keep the sorting drop-down button selected after clicking on it, instead of resetting back to "All". Below are my HTML, CSS, and jQuery code. You can view the functionality on my website here: jQuery/Javascript: $(document).ready(function($ ...

Are there any guidelines or rules outlining what is still considered valid JSONP?

I am looking for information on how to properly parse JSONP messages in .NET and extract the JSON data they contain. Is there a current specification that outlines what constitutes a valid JSONP message? During my research, I came across a blog post from ...

I am experiencing some unwanted movement of divs when I hide one element and show another. Is there a way to prevent this from happening

My webpage features a dynamic div that transforms into another div upon clicking a button. Although both divs share similar properties, clicking the button causes some elements to shift unexpectedly. Strangely enough, when the height of the replacing div i ...

Attempting to grasp the fundamentals of angular Routing, however, upon attempting to reload the page, nothing appears to be displayed

While working in the Bracket editor, I created a file structure with various files located under the 'scripts' tags within the Index.html file. The root folder is named 'projectAngular', inside which there are subfolders like 'appC ...