Toegang tot je klembord met JavaScript

Ingediend door Dirk Hornstra op 01-oct-2018 22:36

Een stagair op het werk is bezig met een webpagina, waarbij in een tekstbox netjes de geadviseerde aanpassingen voor een configuratie-bestand staan. Hij wil dat als je op een knop "kopieer naar klembord" klikt ervoor zorgen dat de tekst op het clipboard van Windows komt te staan, zodat de developer het in Visual Studio kan plaatsen en niet zelf een (omslachtige) selectie van het tekstvak en CTRL-C hoeft te doen. Klinkt niet al te moeilijk.

Het lukt alleen niet, dus aan mij wordt de vraag gesteld of ik wat van JavaScript weet. Toen wist ik nog niet wat de vraag was, was mijn antwoord ja, en keek ik mee naar de gebouwde code. Die kwam erop neer dat met de functie document.execCommand("copy") de waardes naar het klembord gekopieerd werden. In de console.log zagen we de waardes wel, maar in het echte Windows klembord niet. Wat is er aan de hand?

De functie zelf kende ik wel, ik heb wel eens wat moeten aanpassen/toevoegen in een tinyMCE editor en daar zit die functionaliteit ook in. In de code die gemaakt was kon ik het zelf zo snel niet werkend krijgen, dus mijn antwoord was "ik kom erop terug". Het was ook bijna 17.00 uur. Belofte maakt schuld, dus nadat ik 2 hoofdstukken voor de studie doorgelezen heb start ik rond 22.45 uur met de rustgevende muziek van MUSE aan deze taak. 

Eerst even spieken, beter goed gejat, dan slecht zelf gemaakt. Even een Wordpress-omgeving geopend, maar in die editor heb ik geen copy en paste. Ik zou nog even in een Joomla-omgeving kunnen kijken, maar laat ik eerst "Google is your Friend" proberen. Dus even snel Googelen op "codepen execcommand copy". Dat geeft me als eerste link: https://codepen.io/dervondenbergen/pen/rmbDz Die code werkt alleen niet omdat er een fout in het javascript zit. Dat moet niet function({...}) zijn, maar function(){...}. Aangepast. Daarna werkt het wel. Juiste code is dus:


function copy() {
  var copyDiv = document.getElementById('text');
  copyDiv.focus();
  document.execCommand('SelectAll');
  document.execCommand("Copy", false, null);
}

document.addEventListener("DOMContentLoaded", function ()
  {
  document.getElementById("copy").onclick = copy;
};

Dit werkt in mijn Google Chrome. Nog even in Internet Explorer proberen, daar toont CodePen dat ik het met deze browser wel kan vergeten. Ok, gaan we door met Chrome. 

Het voorbeeld werkt met een bestaande knop en dat werkte ook wel, het ging meer om een knop die we dynamisch maakten en waarbij het niet werkte.  Code daarom aangepast naar het volgende:


<!-- HTML -->
 

<input value="aawdadw" type="text" id="text" placeHolder="Enter Text To Copy"/>
<span id="dynamicshizzle">Hier komt een eigen knop!</span>


// JS

 

function copy() {
  var copyDiv = document.getElementById('text');
  copyDiv.focus();
  document.execCommand('SelectAll');
  document.execCommand("Copy", false, null);
}

$("#dynamicshizzle").append("&nbsp;<input type=\"button\" value=\"Kopieer\" />").on("click", function(){copy();})

 

Ook dit werkt bij mij prima... Morgen maar kijken wat er qua code anders is waardoor het niet werkt. Ik zal dat hier later toevoegen om mensen met vergelijkbare problemen uit de brand te helpen. Update: exacte oorzaak niet bekend. Het zal een missende SelectAll geweest zijn. In ieder geval, na het toevoegen van bovenstaande code werkte het zoals gewenst!