1

I am using the copyToClipboard in my application. It works good in Chrome and Firefox browsers except in IE and Firefox.

In I.E. (esp. version 11), on click of Copy, it introduces a native browser popup, asking to Allow or Deny and also it scrolls to bottom of the page.

The popup introduction is fine, but I need to stop the scrolling downwards.

Code:

$scope.copyData = function(id) {
    var copyAreaObject = document.createElement('textarea');
    $scope.copyInitialize(id, copyAreaObject);
    var selector = document.querySelector('#copyWrapper');
    selector.select();
    document.execCommand('copy');
    document.body.removeChild(copyAreaObject);
  };

Click Here for Demo

Will Webb
  • 734
  • 5
  • 20
Shashank
  • 1,974
  • 2
  • 12
  • 37
  • 1
    Your appending your textbox to the end of the body. I guess the browser scrolls down to the element that is being copied so the user can see what they are adding to the clipboard. – ste2425 Mar 30 '17 at 14:59
  • @ste2425 I am creating `textarea` and not `textbox`, that too dynamically. I don't think scrolling issue is due to that. – Shashank Mar 30 '17 at 15:03

2 Answers2

6

Tried Deigo Plutino's answer with additional properties as shown below:

copyAreaObject.style.position = 'fixed';
copyAreaObject.style.bottom= 0;
copyAreaObject.style.left= 0;

It works fine and prevents the scrolling issue. Tested in Edge and IE 11.

For more info, you can also refer to this post: How do I copy to the clipboard in JavaScript?

Rishabh Rajgarhia
  • 718
  • 5
  • 11
2

A simple workaround is setting the style "position" of the textarea to "fixed", so IE doesn't need to scroll.

copyAreaObject.style.position = "fixed";
Diego Plutino
  • 83
  • 1
  • 9