1

Can someone tell me how to copy the result of a function to the clipboard?

After copying the result to the clipboard, I want to paste it after clearing the textarea.

function strReplace() {
    var myStr = document.getElementById("source").value;
    var newStr = myStr.replace(/&‌#‌1084‌;/g, "м")
                      .replace(/&‌quot‌;/g, '"');
    if(document.getElementById("source").value == '') {
        alert("Textarea is empty!");
        return false;                    
    } else {
        // Insert modified string in paragraph
        document.getElementById("myText").innerHTML = newStr;
        taErase();
        document.getElementById('button').focus();
    }
}
ℛɑƒæĿᴿᴹᴿ
  • 4,983
  • 4
  • 38
  • 58
Vitali
  • 11
  • 1

2 Answers2

1

Use this function and pass the value is to be copied as it's only argument.

function copyText (copyText = null){
    let textArea = document.createElement("textarea")
    textArea.value = copyText
    textArea.style.position = "fixed"
    textArea.style.left = "-999999px"
    textArea.style.top = "-999999px"
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    return new Promise((res, rej) => {
        document.execCommand('copy') ? res() : rej()
        textArea.remove()
        //alert('Text Copied!')
    })
}
bairavand
  • 335
  • 3
  • 11
0

I did some changes in your code to simulate a functional example:

  1. Auxiliary function copyToClipboard to copy element value to clipboard

  2. Auxiliary function getSource() to generate a source if is empty

  3. Auxiliary function start() trigger the process manually

When the page finish load, the code will:

  • Check if textarea is empty and print in console (before was an alert)

Now press start button to init process and check if has something in source input

  • If hasn't any text in source input or is empty, generate one

When has an text in source input:

  • replace special chars
  • copy to clipboard
  • copy to textarea
  • focus the Click Me! button
    • Added a css background to change the button color to see the focus (Optional)

Some functions isn't necessary in your solution, just used it to build a functional example.

Good pratices:

  1. Choose one possibility: In your code or use double quote " or single quote '
  2. When post the problem try to post a functional exemple not just a part of code

Follow an example based on your question:

function strReplace() {
  let source = document.getElementById("source");
  let myStr = source.value;
  let newStr = myStr.replace(/&‌#‌1084‌;/g, "м")
    .replace(/&‌quot‌;/g, """);
  if (myStr == "") {
    console.log("Textarea is empty!");
  } else {
    copyToClipboard(source);
    document.getElementById("myText").innerHTML = newStr;
    document.getElementById("button").focus();
  }
}

function getSource() {
  let source = document.getElementById("source");
  if (!source.value) {
    source.value = "<!DOCTYPE html><html><head><title>Page Title</title></head>" +
      "<body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
  }
}

function start() {
  getSource();
  strReplace();
}

function copyToClipboard(element) {
  element.select();
  document.execCommand("copy");
  console.log("Text copied to clipboad:\n" + element.value);
}

strReplace();
#button:focus {
  background: yellowgreen;
}

#source {
  min-width: 260px;
}

#myText {
  min-height: 130px;
  min-width: 260px;
}
<div>
  <input id="source" placeholder="Source">
  <button id="start" type="button" onclick="start()">Start</button>
</div>
<hr>
<div>
  <textarea id="myText"></textarea>
</div>
<div>
  <button id="button" type="button" onclick="strReplace()">Click Me!</button>
</div>
ℛɑƒæĿᴿᴹᴿ
  • 4,983
  • 4
  • 38
  • 58