$("td").click(function (e) {
        var clickedCell = $(e.target).closest("td");
        navigator.clipboard.writeText(clickedCell.text());
        alert(clickedCell.text());
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First<td>
</tr>
<tr>
<td>Second<td>
</tr>
<tr>
<td>Third<td>
</tr>
<tr>
<td>Fourth<td>
</tr>
</table>

Antwoord 16

Ik heb samengesteld wat ik denk dat het beste is.

• Gebruikt cssText om uitzonderingen in Internet Explorer te voorkomen in plaats van rechtstreeks op te maken.
• Herstelt de selectie als die er was
• Stelt alleen-lezen in zodat het toetsenbord niet verschijnt op mobiele apparaten
• Heeft een tijdelijke oplossing voor iOS zodat het echt werkt zoals het normaal execCommand blokkeert.

Hier is het:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');
  // Move it off-screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';
  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);
  document.body.appendChild(textarea);
  return function setClipboardText(text) {
    textarea.value = text;
    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;
    // iOS Safari blocks programmatic execCommand copying normally, without this hack.
    // https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }
    try {
      const result = document.execCommand('copy');
      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }
      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Gebruik: copyToClipboard('some text')

Antwoord 17

De andere methoden zullen platte tekst naar het klembord kopiëren. Om HTML te kopiëren (d.w.z. u kunt de resultaten in een WYSIWYG-editor plakken), kunt u het volgende doen in Internet Explorer alleen. Dit is fundamenteel anders dan de andere methoden, omdat de browser de inhoud daadwerkelijk zichtbaar selecteert.

// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}
editableDiv.appendChild(someContentElement);
// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();

Antwoord 18

Ik heb de volgende oplossing gevonden:

De on-key-down-handler maakt een “pre”-tag. We stellen de inhoud in om naar deze tag te kopiëren, maken vervolgens een selectie op deze tag en retourneren true in de handler. Dit roept de standaard handler van Chrome aan en kopieert geselecteerde tekst.

En als je het nodig hebt, kun je de time-out instellen voor een functie voor het herstellen van de vorige selectie. Mijn implementatie op MooTools:

function EnybyClipboard() {
    this.saveSelection = false;
    this.callback = false;
    this.pastedText = false;
    this.restoreSelection = function() {
        if (this.saveSelection) {
            window.getSelection().removeAllRanges();
            for (var i = 0; i < this.saveSelection.length; i++) {
                window.getSelection().addRange(this.saveSelection[i]);
            }
            this.saveSelection = false;
        }
    };
    this.copyText = function(text) {
        var div = $('special_copy');
        if (!div) {
            div = new Element('pre', {
                'id': 'special_copy',
                'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
            });
            div.injectInside(document.body);
        }
        div.set('text', text);
        if (document.createRange) {
            var rng = document.createRange();
            rng.selectNodeContents(div);
            this.saveSelection = [];
            var selection = window.getSelection();
            for (var i = 0; i < selection.rangeCount; i++) {
                this.saveSelection[i] = selection.getRangeAt(i);
            }
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(rng);
            setTimeout(this.restoreSelection.bind(this), 100);
        } else return alert('Copy did not work. :(');
    };
    this.getPastedText = function() {
        if (!this.pastedText) alert('Nothing to paste. :(');
        return this.pastedText;
    };
    this.pasteText = function(callback) {
        var div = $('special_paste');
        if (!div) {
            div = new Element('textarea', {
                'id': 'special_paste',
                'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
            });
            div.injectInside(document.body);
            div.addEvent('keyup', function() {
                if (this.callback) {
                    this.pastedText = $('special_paste').get('value');
                    this.callback.call(null, this.pastedText);
                    this.callback = false;
                    this.pastedText = false;
                    setTimeout(this.restoreSelection.bind(this), 100);
                }
            }.bind(this));
        }
        div.set('value', '');
        if (document.createRange) {
            var rng = document.createRange();
            rng.selectNodeContents(div);
            this.saveSelection = [];
            var selection = window.getSelection();
            for (var i = 0; i < selection.rangeCount; i++) {
                this.saveSelection[i] = selection.getRangeAt(i);
            }
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(rng);
            div.focus();
            this.callback = callback;
        } else return alert('Failed to paste. :(');
    };
}

Gebruik:

enyby_clip = new EnybyClipboard(); // Init
enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true;
enyby_clip.pasteText(function callback(pasted_text) {
    alert(pasted_text);
}); // Place this in Ctrl+V handler and return true;

Op plakken maakt het een textarea en werkt op dezelfde manier.

PS: Misschien kan deze oplossing worden gebruikt voor het maken van een volledige cross-browser-oplossing zonder flits. Het werkt in Firefox en Chrome.

Antwoord 19

Deze code getest @ 2021 mei. Werk aan chroom, dwz, rand. ‘Message’-parameter hieronder is de stringwaarde die u wilt kopiëren.

<script type="text/javascript">
    function copyToClipboard(message) {
        var textArea = document.createElement("textarea");
        textArea.value = message;
        textArea.style.opacity = "0"; 
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Copying text command was ' + msg);
        } catch (err) {
            alert('Unable to copy value , error : ' + err.message);
        }
        document.body.removeChild(textArea);
    }
</script>

Antwoord 20

Ik vond de volgende oplossing:

Ik heb de tekst in een verborgen input. Omdat setSelectionRangewerkt niet op verborgen ingangen, gewijzigd tijdelijk het type naar tekst, de tekst gekopieerd en maakte het vervolgens weer verborgen. Als u de tekst van een element wilt kopiëren, kunt u deze doorgeven aan de functie en de inhoud opslaan in de doelvariabele.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});
function copyToClipboard() {
    var target = jQuery('#hidden_text');
    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);
    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }
    // Hide input again
    target.attr('type', 'hidden');
    return succeed;
}

Antwoord 21

Er zijn al veel antwoorden, maar voeg er graag een toe (jQuery). Werkt prima in elke browser, ook op mobiele (d.w.z. vragen over beveiliging, maar als je akkoord gaat, werkt het gewoon prima).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }
    $(oText).remove();
    return bResult;
}

In uw code:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

Antwoord 22

Vanaf Flash 10 kunt u alleen naar het klembord kopiëren als de actie voortkomt uit gebruikersinteractie met een Flash-object. (Lees het gerelateerde gedeelte van de Flash 10-aankondiging van Adobe.)

De oplossing is om een Flash-object boven de knop Kopiëren te plaatsen, of welk element dan ook dat de kopie start. ZeroClipboard is momenteel de beste bibliotheek met deze implementatie. Ervaren Flash-ontwikkelaars willen misschien gewoon hun eigen bibliotheek maken.

Antwoord 23

Kopieer tekst van HTML-invoer naar het klembord:

function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");
   /* Select the text field */
   copyText.select();
   /* Copy the text inside the text field */
   document.execCommand("Copy");
   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

<!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">
 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

.textToCopyInput{opacity: 0; position: absolute;}

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

npm install clipboard --save

bower install clipboard --save

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();
  node.textContent = text;
  document.body.appendChild(node);
  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');
  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');

function copytoclipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val('0' + element).select();
    document.execCommand("copy");
    $temp.remove();
}

if (document.createRange) {
    // Internet Explorer 9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // Does nothing on Firefox
} else {
    // Internet Explorer 8 and earlier. This stuff won't work
    // on Internet Explorer 9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table).
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}