Noklikšķiniet uz pogas kopēt uz starpliktuvi, izmantojot jQuery

Kā kopēt divdaļā esošo tekstu uz starpliktuvi? Man ir divsadaļa, un man ir nepieciešams pievienot saiti, kas pievienos tekstu starpliktuvē. Vai tam ir kāds risinājums?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

Pēc tam, kad es noklikšķinu uz kopēt tekstu, pēc tam nospiežu Ctrl + V, tas ir jāielīmē.

Ir vēl viens veids, kas nav saistīts ar Flash (izņemot Clipboard API, kas minēts jfriend00's atbildē). Jums ir jāizvēlas teksts un pēc tam jāizpilda komanda copy, lai kopētu uz starpliktuvi jebkuru tekstu, kas pašlaik ir atlasīts lapā.

Piemēram, šī funkcija nokopēs starpliktuves elementa saturu starpliktuvē (papildināts ar PointZeroTwo komentāros izteikto ieteikumu):

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

Tas darbojas šādi:

  1. Izveido pagaidu slēpto teksta lauku.
  2. Nokopē elementa saturu šajā teksta laukā.
  3. Atlasa teksta lauka saturu.
  4. Izpilda komandu kopēt kā: document.execCommand("copy").
  5. Noņem pagaidu teksta lauku.

Jūs varat apskatīt īsu demonstrāciju šeit:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
Copy P1
Copy P2
<br/><br/><input type="text" placeholder="Paste here for test" />

Galvenā problēma ir tā, ka pašlaik ne visas pārlūkprogrammas atbalsta šo funkciju, bet jūs varat to izmantot galvenajās pārlūkprogrammās no:

  • Chrome 43
  • Internet Explorer 10
  • Firefox 41
  • Safari 10

Atjauninājums 1: To var panākt arī ar tīru JavaScript risinājumu (bez jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // 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);

}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
Copy P1
Copy P2
<br/><br/><input type="text" placeholder="Paste here for test" />

Ievērojiet, ka tagad mēs nododam id bez #.

madzohan ziņoja komentāros zemāk, dažos gadījumos (palaižot failu lokāli) ir kāda dīvaina problēma ar Google Chrome 64 bitu versiju. Šķiet, ka šī problēma ir novērsta, izmantojot iepriekš minēto risinājumu, kas nav jQuery.

Madzohan izmēģināja Safari, un risinājums darbojās, bet, izmantojot document.execCommand('SelectAll'), nevis izmantojot .select() (kā norādīts tērzēšanā un komentāros zemāk).

Kā komentāros norāda PointZeroTwo, kodu varētu uzlabot, lai tas atgrieztu veiksmīgu/neveiksmīgu rezultātu. Demonstrējumu var apskatīt [šajā jsFiddle][7].


ATJAUNINĀJUMS: KOPIJA, SAGLABĀJOT TEKSTA FORMĀTU

Kā norādīja lietotājs StackOverflow spāņu valodas versijā, iepriekš minētie risinājumi darbojas lieliski, ja vēlaties burtiski kopēt elementa saturu, bet tie nedarbojas tik labi, ja vēlaties ievietot kopēto tekstu ar formātu (tā kā tas tiek kopēts input type="text", formāts tiek "zaudēts").

Risinājums tam būtu kopēt saturu rediģējamā div un pēc tam kopēt to, izmantojot execCommand līdzīgā veidā. Šeit ir piemērs - noklikšķiniet uz kopēšanas pogas un pēc tam ielīmējiet satura rediģējamajā lodziņā zemāk:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<p id="demo">Bold text and underlined text.</p>
Copy Keeping Format 

<div id="target" contentEditable="true"></div>

Un jQuery tas būtu šādi:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo">Bold text and underlined text.</p>
Copy Keeping Format 

<div id="target" contentEditable="true"></div>
Komentāri (32)
Risinājums

Editēts 2016. gadā

No 2016. gada teksta kopēšanu uz starpliktuvi tagad var veikt lielākajā daļā pārlūkprogrammu, jo lielākajā daļā pārlūkprogrammu ir iespēja programmatiski kopēt teksta izlasi uz starpliktuvi, izmantojot document.execCommand("copy"), kas darbojas pēc atlases.

Tāpat kā dažas citas darbības pārlūkprogrammā (piemēram, jauna loga atvēršana), arī kopēšanu uz starpliktuvi var veikt tikai ar konkrētu lietotāja darbību (piemēram, peles klikšķi). Piemēram, to nevar izdarīt, izmantojot taimeri.

Lūk, koda piemērs:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
      // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;
    try {
          succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}
input {
  width: 400px;
}
<input type="text" id="copyTarget" value="Text to Copy"> Copy<br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Lūk, mazliet sarežģītāka demonstrācija: https://jsfiddle.net/jfriend00/v9g1x0o6/.

Jūs varat arī iegūt jau iepriekš izveidotu bibliotēku, kas to dara jūsu vietā, izmantojot clipboard.js.


Sena, vēsturiska atbildes daļa

Tiešā kopēšana uz starpliktuvi, izmantojot JavaScript, nav atļauta nevienā mūsdienu pārlūkprogrammā drošības apsvērumu dēļ. Visizplatītākais risinājums ir izmantot Flash funkciju kopēšanai uz starpliktuvi, ko var aktivizēt tikai ar tiešu lietotāja klikšķi.

Kā jau minēts, ZeroClipboard ir populārs kodu kopēšanas veikšanai paredzētais Flash objekta pārvaldības komplekts. Es to esmu izmantojis. Ja pārlūkošanas ierīcē ir instalēta Flash (kas izslēdz mobilos vai planšetdatorus), tas darbojas.


Nākamais izplatītākais risinājums ir vienkārši ievietot starpliktuvē ievietoto tekstu ievades laukā, pārvietot fokusu uz šo lauku un ieteikt lietotājam nospiest Ctrl + C, lai kopētu tekstu.

Citas diskusijas par šo problēmu un iespējamiem tās apiešanas veidiem ir atrodamas šajos iepriekšējos Stack Overflow ziņojumos:


Šie jautājumi, kuros tiek prasīta mūsdienīga alternatīva Flash izmantošanai, ir saņēmuši daudz augšupvērstu balsu, bet atbilžu ar risinājumu nav (iespējams, tāpēc, ka tādu nav):


Internet Explorer un Firefox izmantoja nestandarta API piekļuvei starpliktuvei, taču to modernākajās versijās šīs metodes ir atceltas (iespējams, drošības apsvērumu dēļ).


Ir veikts topošais standartizācijas darbs, lai mēģinātu izstrādāt "drošu" veidu, kā risināt visbiežāk sastopamās starpliktuves problēmas (iespējams, ka ir nepieciešama īpaša lietotāja darbība, līdzīgi kā Flash risinājums), un, šķiet, ka tas varētu būt daļēji īstenots jaunākajās Firefox un Chrome versijās, bet es to vēl neesmu apstiprinājis.

Komentāri (17)

Kopējamais teksts ir teksta ievades laukā,piemēram: <input type="text" id="copyText" name="copyText"> un, noklikšķinot uz pogas virs teksta, teksts jākopē uz starpliktuvi, tāpēc poga ir šāda:Copy Jūsu skripts būtu šāds:

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

</script>

CDN failiem

note: failiem ZeroClipboard.swf un ZeroClipboard.js" jābūt tajā pašā mapē, kurā ir jūsu fails, kas izmanto šo funkcionalitāti, VAI jums ir jāiekļauj, kā mēs iekļaujam <script src="""></script> mūsu lapās.

Komentāri (1)