javascript - How can I copy text in one click in Mozilla Firefox? - Stack Overflow

This code works fine in Google Chrome, Opera, IE 11. But it doesn't work in Mozilla firefox and Sa

This code works fine in Google Chrome, Opera, IE 11. But it doesn't work in Mozilla firefox and Safari. I get error in the following string "var successful = document.execCommand('copy');"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test Copy</title>
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/bootstrap.js"></script>
    <script src="js/npm.js"></script>
    <script src=".min.js"></script>
</head>
<body>
        <div id="text">
            Copytextblalalalal
        </div>
        <button id="btnCopy" onclick="copyText()">COPY</button>
    </div>
</div>
<script>
    function copyText() {
        var emailLink = document.querySelector('#text');
        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 mand was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
        window.getSelection().removeAllRanges();
    }
</script>
</body>
</html>

This code works fine in Google Chrome, Opera, IE 11. But it doesn't work in Mozilla firefox and Safari. I get error in the following string "var successful = document.execCommand('copy');"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test Copy</title>
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/bootstrap.js"></script>
    <script src="js/npm.js"></script>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
        <div id="text">
            Copytextblalalalal
        </div>
        <button id="btnCopy" onclick="copyText()">COPY</button>
    </div>
</div>
<script>
    function copyText() {
        var emailLink = document.querySelector('#text');
        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 mand was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
        window.getSelection().removeAllRanges();
    }
</script>
</body>
</html>
Share Improve this question edited May 6, 2015 at 14:04 Vadim Denisuk asked May 6, 2015 at 13:50 Vadim DenisukVadim Denisuk 4463 silver badges19 bronze badges 5
  • From mdn : "copy Copies the current selection to the clipboard. For Mozilla, clipboard capability must be enabled in the user.js preference file. See A brief guide to Mozilla preferences for more information." – Kaiido Commented May 6, 2015 at 14:08
  • @Kaiido this solution doesn't work. Firefox version 37.0.2 – Vadim Denisuk Commented May 6, 2015 at 14:32
  • did you follow those steps ? (didn't tried myself) – Kaiido Commented May 6, 2015 at 14:47
  • Also always though that this answer was the best solution : stackoverflow./a/6055620/3702797 I would hate your website so much if because of some action I wasn't aware, I do loose all the content I kept in my Clipboard – Kaiido Commented May 6, 2015 at 15:00
  • 1 @Kaiido According to bugzilla.mozilla/show_bug.cgi?id=913734 , capability.policy.* preferences have been removed since firefox 29. The documentation is not up to date. – 林果皞 Commented May 8, 2015 at 8:43
Add a ment  | 

1 Answer 1

Reset to default 5

As of Firefox 41 (September 2015) the copy mand should be available by default when triggered from certain trusted (user-triggered) events, such as what would be fired in response to a button click. The patibility table from MDN offers further information, see also the release notes.

The code in the question should therefore work. Indeed, I tested something very similar (see code below) and it worked great for me using Firefox 44.

function doCopy() {
    var textToCopy = document.getElementById('textToCopy');
    var range = document.createRange();
    range.selectNodeContents(textToCopy);
    window.getSelection().addRange(range);
    document.execCommand('copy');
}

(function() {
    var el = document.getElementById("copyTrigger");
    el.addEventListener("click", doCopy, false);
})();
textarea {display: block; margin-top: 1em; width: 500px;}
<div id="textToCopy">Elephant</div>
<button id="copyTrigger">Copy above text</button>
<textarea placeholder="Try pasting here to test"></textarea>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745431607a4627416.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信