Difference between revisions of "P5js Copy Text to Clipboard"

Latest revision as of 08:09, 8 June 2021

P5js Copy to Clipboard

Leider gibt es keinen P5JS Befehl, mit dem sich der Text in die Zwischenablage kopieren lässt. Doch dieses Problem ist mit einer zusätzlichen Funktion leicht zu lösen.

Probiere es selbst aus! LINK

Um im umgekehrten Weg Text aus der Zwischenablage in einen P5JS Anwendung zu kopieren, könntest Du einen Textarea (LINK) verwenden.

Funktion

Füge diese Funktion in deinen Code ein, damit du den Befehl copyStringToClipboard(myString) benutzen kannst.

function copyStringToClipboard (str) {
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}

Code Example

// p5js Copy Text to Clipboard
// by Olaf Val
// based on example by Techoverflow
// https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/

let input, button;
let myText;

function setup() {
  createCanvas(400, 400);
  background(200);

  input = createInput();
  input.position(20, 20);

  button = createButton('Copy to Clipboard');
  button.position(input.x + input.width, 20);
  button.mousePressed(CopyToClipboard);

  textAlign(CENTER);
  textSize(50);
}

function CopyToClipboard() {
  myText = input.value();
  copyStringToClipboard (myText);
}

function copyStringToClipboard (str) {
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}