Copy to clipboard issue javascript from textarea

Question

I have two problems: The Java script is not working with IE Edge, not able to copy (IE11/Firefox and Chrome it works). The problem is related to textarea if i change it to <p> or <span> it works.

The second problem I have is when i past the information into a mail (Browser IE, Firefox, Chrome) I get a screenshot (see image). If i paste it into the notepad i get the correct output

any advice support what can be changed or why it is like that?

  $('.btn').on('click', function(){ element = $(this).closest('td').prev('td')[0]; var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); try { var successful = document.execCommand('copy'); if(successful) { $('.res').html("Value Copied"); window.setTimeout(function() { $(".res").fadeTo(1500, 2000).slideUp(1500, function(){ }); }, 100); } else { $('.res').html("Unable to copy!");} } catch (err) { $('.res').html(err); } }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div id="alert_message" class="res" style=" color:#FF0000; font-size:10px; font-weight:bold"></div> <td><textarea></textarea></td> <td><button type="button" class="btn pull-right btn-success btn-sm" title="Copy Information"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button></td> 

when i copy into a mail chain why i get a screenshot instead of text?

Answer 1

Are you trying to copy just text from textarea? If yes, try something like this (I added Id to textarea to make it simpler):

    <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    <textarea id="note"></textarea>
   <button type="button" class="btn pull-right btn-success btn-sm" title="Copy Information"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>

$('.btn').on('click', function(){
    var note = $("textarea#note").val();
    CopyToClipboard(note);
// ...
// rest of your code with messages
// ...
});

function CopyToClipboard(note) {
    function listener(e) {
        e.clipboardData.setData("text/html", note);
        e.clipboardData.setData("text/plain", note);
        e.preventDefault();
    }
    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);
}

Fiddler

I think it inserting screenshot to email, because you copy page HTML with all tags, not just text inside the textarea.