Klik op knop kopiëren naar klembord met jQuery

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});
function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
}
//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}
#copyTarget h1 {
  color: blue;
}
#copyTarget h2 {
  color: red;
}
#copyTarget h3 {
  color: green;
}
#copyTarget h4 {
  color: cyan;
}
#copyTarget h5 {
  color: brown;
}
#copyTarget h6 {
  color: teal;
}
#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

Antwoord 15

De te kopiëren tekst is in tekstinvoer, zoals: <input type="text" id="copyText" name="copyText"> en, als op de knop hierboven wordt geklikt, moet de tekst worden weergegeven gekopieerd naar het klembord, dus de knop is als:<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Je script zou moeten zijn als :

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});
</script>

Voor CDN-bestanden

• (zeroclipboard.swf):
• (zeroclipboard.js):

opmerking: ZeroClipboard.swf en ZeroClipboard.js“-bestand moeten zich in dezelfde map bevinden als uw bestand dat deze functionaliteit gebruikt, OF je moet opnemen zoals we <script src=""></script> op onze pagina’s opnemen.

Antwoord 16

je kunt dit lib gewoon gebruiken om het kopieerdoel gemakkelijk te realiseren!

https://clipboardjs.com/

Het kopiëren van tekst naar het klembord zou niet moeilijk moeten zijn. Het zou niet nodig moeten zijn
tientallen stappen om te configureren of honderden KB’s om te laden. Maar de meeste van
het zou niet afhankelijk moeten zijn van Flash of een opgeblazen framework.

Daarom bestaat clipboard.js.

of

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

De ZeroClipboard-bibliotheek biedt een gemakkelijke manier om tekst naar de
klembord met een onzichtbare Adobe Flash-film en een JavaScript
interface.

Antwoord 17

Clipboard-polyfill bibliotheek is een polyfill voor het moderne op Promise gebaseerde asynchrone klembord API.

installeren in CLI:

npm install clipboard-polyfill 

importeren als klembord in JS-bestand

window.clipboard = require('clipboard-polyfill');

voorbeeld

Ik gebruik het in een bundel met require("babel-polyfill"); en heb het getest op chrome 67. Allemaal goed voor productie.

Antwoord 18

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>
    <center>
    <p id="p1">Hello, I'm TEXT 1</p>
    <p id="p2">Hi, I'm the 2nd TEXT</p><br/>
    <button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
    <button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
    </center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

Antwoord 19

html-code hier

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

JS-CODE:

     function copyToClipboard(elementId) {
                      // Create a "hidden" input
                      var aux = document.createElement("input");
                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

Antwoord 20

u kunt een afzonderlijke tekst kopiëren behalve de tekst van een HTML-element.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');
            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');
            $txt.select();
            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

Antwoord 21

Pure JS, zonder inline onclick, voor gepaarde klassen “inhoud – kopieerknop”. Zou comfortabeler zijn als je veel elementen hebt)

(function(){
/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";
let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');
for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}
})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 
} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>