Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Copy a text when a link or button is clicked

I am new to website development and try to figure out how can I make my user automatically copy a code in to his/her mouse(clip board) when clicked on a link (using html, php or javascript). For example, I am trying to create this personal website, when a user click on a link or a button in my website, it should automatically copy that text code to the clip board. I have seen sites like retailmenot.com do this: Example:- enter image description here

Please show me with an example if you can


Updated:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>


$("#link").click(function(){
  var holdtext = $("#clipboard").innerText;
  Copied = holdtext.createTextRange();
  Copied.execCommand("Copy");
});


</script>
</head>
<body>

<hr>
<a href="http://www.w3schools.com" style="font-family:arial;color:black;font-size:25px;">Click here to copy the Code</a> <button onclick="copyToClipboard()">Copy Text</button>
<hr>

</body>
</html>
like image 628
D P. Avatar asked Oct 26 '13 11:10

D P.


People also ask

How do you copy text instead of link?

After the address is highlighted, press Ctrl + C or Command + C on the keyboard to copy it. You can also right-click any highlighted section and choose Copy from the drop-down menu. Once the address is copied, paste that address into another program by clicking a blank field and pressing Ctrl + V or Command + V .

How do I copy text from a Div button click?

Just add the clipboard. js or min file. While initiating, use the class which has the html component to be clicked and just pass the id of the component with the content to be copied, to the click element.


1 Answers

Here is the function which might can help you or future referer.

    function copyToClipboard(id) {
    var text = $("#td_id_" + id).text(); //getting the text from that particular Row
    //window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
  }

Unit test in all Browser not done.

like image 82
Nikunj Dhimar Avatar answered Oct 13 '22 14:10

Nikunj Dhimar