-1

I have json data in pre tag

Below is the JS I have used

No errors in browser console. But when I paste the content in the pre tag doesn't get pasted

var emailLink = document.querySelector('#filecontent1');
var range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);

try {
  var successful = document.execCommand('copy');
  var msg = successful ? 'successful' : 'unsuccessful';
  console.log('Copy email command was ' + msg);
} catch (err) {
  console.log('Oops, unable to copy');
}
window.getSelection().removeAllRanges();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="filecontent1">
        {
            "a":"string a",
            "b":"string b"
        }
    </pre>
mplungjan
  • 134,906
  • 25
  • 152
  • 209
Krishna
  • 885
  • 4
  • 16
  • 31

1 Answers1

3

To prevent abuse, most browsers will only allow you to modify the user's clipboard as part of a user-initiated event:

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

(Note that it does not throw an error on failure; the browser just returns false from the execCommand; Firefox also shows a console warning message.)

Your above code fails as is (at least in Safari, Chrome, and FF, which is all I've tested), because it's initiated programmatically. But it works in those browsers if wrapped in a click event:

var testCopy = function() {
  var emailLink = document.querySelector('#filecontent1');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  window.getSelection().removeAllRanges();
}

testCopy(); // this will fail, because it's not user-initiated
document.getElementById("go").onclick = testCopy; // this will work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="filecontent1">
    {
        "a":"string a",
        "b":"string b"
    }
</pre>

<button id="go">Copy</button>
Daniel Beck
  • 16,972
  • 5
  • 29
  • 49
  • /U/SanielBeck nailed it. It doesn't work because it's not supposed to work. It's a security problem. The only thing I'll add is that even if you can do a workaround, I wouldn't build anything that relies it. It's likely that future releases will not allow clipboard access by any programmatic means in JavaScript. The current restriction is just a half-measure, not a real fix. – Terry Carmen Sep 10 '18 at 14:41
  • 1
    Well, I wouldn't go *that* far; if browsers removed every feature that could be abused by malicious websites there wouldn't be much left, so we wind up with compromises such as restricting dangerous operations to user-initiated events. (See also CORS, blocked navigation on synthetic click events, onbeforeunload limitations, etc.) Safari only relatively [recently added](https://stackoverflow.com/questions/36786376/safari-browser-doesnt-support-document-execcommandcopy-command) support for `execCommand()`; so I don't expect it to go away any time soon. – Daniel Beck Sep 10 '18 at 15:06
  • Can you maybe give a little more information than "it's not working"? That doesn't give me much to go on. It works in (at least) current Safari, Firefox and Chrome when triggered by a user-initiated event, and as described above cannot be made to work when triggered without the user's involvement. What are you seeing differently? – Daniel Beck Sep 10 '18 at 16:33
  • Yes it works only in Safari and Firefox but not Chrome – Krishna Sep 10 '18 at 16:41
  • I don't know what to tell you; I'm using Chrome and it works fine for me. If you can be more forthcoming with information about *what* specifically is not working for you I might be able to help. If you're just going to keep repeating "it's not working" then there's nothing I can do for you. – Daniel Beck Sep 10 '18 at 17:23
  • I have a huge json content like 7000 to 20000 lines. I have checked the above code. It's working fine since it is of 4 lines. But for my content it's not getting copied. Will it doesn't work for too much content – Krishna Sep 17 '18 at 06:25