How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied.

For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue.

This is the code I have been working with:


const span = document.querySelector("span");

span.onclick = function() {
document.execCommand("copy");
}

span.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
    event.clipboardData.setData("text/plain", span.textContent);
    console.log(event.clipboardData.getData("text"))
}
});    
<div class="form-group">
  <label for="phone">Please Kindly Pay for Registration</label><br>
  <div class=" col-md-6 ">

    <img class="img-responsive cc-img" src="../img/payment/googlepayImg.png" style="padding-bottom: 10px; padding-top: 10px">
    <a href="#facebook_ads_example">UPI ID: david@okidfcbank</a>
    <label for="phone" style="font-weight:700; font-size: 17px;">or</label>
    <img class="img-responsive cc-img" src="../img/payment/googlepay.png">

  </div>
  <div class=" col-md-6">

    <img class="img-responsive cc-img" src="../img/payment/paytmImg.png" style="padding-bottom: 10px; padding-top: 10px">
    <span> Paytm link https://p-y.tm/aVL-Maw </span><br>
    <label for="phone" style="font-weight:700; font-size: 17px;">or</label>
    <img class="img-responsive cc-img" src="../img/payment/paytm.png"><br>

  </div>
</div>

Answer №1

  1. First step is to designate the link you wish to duplicate by inserting an ID.
  2. Next, include a javascript - jQuery "Copy Function".

Make sure to visit this URL:

     codepen.io/shaikmaqsood/pen/XmydxJ

This code is truly remarkable!

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

Angular 2 Typeface Delivery to the Server

I'm experiencing an issue with the font when trying to access it from the server. It works fine on localhost, but on the server with a different directory structure, it fails to load properly. The same problem occurs with the logo as well. @font-face ...

Node functions continue to run smoothly without affecting the loop

I am working on a webdriverjs application and I am trying to determine when jQuery has finished its processes on the page. I have implemented some methods, but it seems that even when the condition is supposed to trigger an else statement and stop the loop ...

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

Submitting information from a single form to two separate URLs

Is it possible to send a post from one form to two different URLs simultaneously? For example, sending POST name data to both process.php and confirm.php at the same time. $(document).ready(function(){ $("#myform").validate({ debug: false, ...

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

Attempting to retrieve the HTML from a webpage that undergoes modification by JavaScript post-loading. Followed directions in this guide, executing the command below in my Python script after initial page load: html = browser.execute_script("return docume ...

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

The architecture of my app is currently set up with functions that are scoped to specific modules, such as "Auth" for instance: async function authenticate(email) { let authenticated = false; try { if (email) { if (!validEmail(email) ...

Adjust tool tip text on the fly

As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

Using animation in CSS is limited to only one time

My goal is to create a pulse animation that triggers when a button is clicked. This image shows the animation midway: https://i.stack.imgur.com/EHDqs.png When the button is clicked, the animation plays once and then stops. However, I want the animation to ...

Alter the background color of the text input when it is selected for exit

How can I adjust the input field color when text is selected? I'm looking to get rid of the dark grey box highlighting. (Check out the image below) https://i.sstatic.net/OgWaz.gif <div id="ember1102" class="ember-view"> <i class="fa fa ...

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Arriving at a new, chaotic code base with no testing available has presented me with a significant challenge. I am currently struggling to resolve an issue without the use of ES6, only relying on plain vanilla JS and jQuery. The scenario: Within a web pag ...

Is there a way to verify the results of a Python script within a PHP webpage?

For my school project, I am creating a PHP website where I want to implement a Python code Quiz. I envision a scenario where users can input Python code in an on-page editor/IDE and the output is checked automatically using PHP If-function to determine cor ...

Tips for resolving issues with mysql_fetch_assoc()

Similar Question: mysql_fetch_array() error - Fixing parameter issue Whenever I execute the code below, I encounter this issue: Warning: mysql_fetch_assoc(): provided argument is not a valid MySQL result resource If anyone knows how to rectify this pro ...

Strange actions observed in JavaScript addition operations

In my Angular application, I have the following TypeScript function: countTotal() { this.total = this.num1 + this.num2 } The value of num1 is 110.84 and the value of num2 is 5.54. I determined these values by watching this.num1 and this.num2 in the C ...

Masking input text to allow numbers only using either javascript or jquery

I have experience with javascript and jquery. My goal is to create a masking template for <input type="text"> This template should only accept numbers and automatically format the input with dashes after every two numbers typed. The desi ...

What is the best way to temporarily bold a cell item within a table row for a specified duration of time?

I am experiencing an issue with a section of my code where I am fetching values from the server and updating a table if a certain value is not present. Once the update is made, I want to visually notify the user by temporarily making the cell's value ...

React Prop Local Modal Redux

Just diving into the world of React and Redux, and I'm a bit lost on how to effectively utilize both local properties and redux properties simultaneously. After trying different approaches without success, I'm reaching out for guidance. My goal i ...

If an element exists in one of the dimensions of a multi-dimensional array

I am facing an issue with my 2D array structure. Here is an example of how it looks: `var arr = [["1", "2", "3"], ["4", "5"], ["6"]];' Despite having the value "4" in one of the inner arrays, when I try running $.inArray("4", arr); or arr.indexOf("4" ...