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?

score 1 · Accepted Answer · answered Jul 29 '19 at 22:19

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.

answered Jul 29 '19 at 22:19

JuliaH

51
3

Hi JuliaH, thank you so much for your help...just notices that in IE11 and IE edge it doesn't copy...any suggestion ? – James Jul 30 '19 at 10:44
Look at this answer: https://stackoverflow.com/a/22581382 this should work in IE11 – JuliaH Jul 31 '19 at 16:53
@James [Fidler](https://jsfiddle.net/eg9qu0oc/) - I used function from this answer [Link](https://stackoverflow.com/a/22581382), it works in all browsers. – JuliaH Jul 31 '19 at 17:06
Hi JuliaH thank you for your support, but it is still not working properly. I found a very good solution kindly check: https://jsfiddle.net/j4r9sxwt/ The only problem is that i'm using a loop, so if i have multiple entries it will copy all text area, instead of the single case (textarea).. i guess because of the function 'each(function()'.. thank you again for your support.. i guess we are really close on the solution thx. – James Jul 31 '19 at 21:08
Yeah, you don't need each, just pass value from your textarea: https://jsfiddle.net/rhdL1st8/ – JuliaH Aug 01 '19 at 00:04
thx JuliaH since i use a loop, while copying the first field it works. but if i want to copy the second field it only copies the information from the first one. At the third field same (first one ect.).. this one works but the only problem is that it copy all fields instead only the wished textarea .. any other advise.. we are really near on the solution ... :) – James Aug 01 '19 at 08:53
@James, so you have multiple textareas and one copy button or separate button for each area? Do you need to copy each are separately or all areas together (like from your Fiddler). I thought you have only one textarea with one button. – JuliaH Aug 02 '19 at 16:29
HI JuliaH, Sorry for the misunderstanding.. yes, because i do a loop (take the information from a query) and i have for each textarea a button. I need to copy each textarea separately. Exactly like from my Fiddler. Thank you again for your support and help! – James Aug 02 '19 at 18:19
1

Do you mean code from your post, or this fiddler https://jsfiddle.net/j4r9sxwt ? Because they are different. Anyway, if you mean code from your post and you are adding textareas with related buttons in a loop, try this: https://jsfiddle.net/0a7svx8t/2/ - use class for button and look for related textarea with .prev() – JuliaH Aug 02 '19 at 18:41
your solution works but only if i remove the '' below the example with '' – James Aug 02 '19 at 20:18
1

@James, I updated fiddle https://jsfiddle.net/53xrvtzb/ Just get value like this: var note = $(this).parent().prev("td").find("textarea").val(); – JuliaH Aug 02 '19 at 21:06

Copy to clipboard issue javascript from textarea

1 Answers1