如何在Mozilla Firefox中单击文本？

本文介绍了如何在Mozilla Firefox中单击文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

此代码在Google Chrome，Opera，IE 11中运行良好。但在Mozilla Firefox和Safari中不起作用。我在下面的字符串中得到错误
var successful = document.execCommand（'copy'）;

 < ;！DOCTYPE html> 
< html> 
< head lang =en> 
< meta charset =UTF-8> 
< title>测试副本< / title> 
< link href =css / bootstrap-theme.css =stylesheet> 
< link href =css / bootstrap.css =stylesheet> 
< script src =js / bootstrap.js>< / script> 
< script src =js / npm.js>< / script> 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script> 
< / head> 
< body> 
< div id =text> 
 Copytextblalalalal 
< / div> 
< button id =btnCopyonclick =copyText（）> COPY< / button> 
< / div> 
< / div> 
< script> 
函数copyText（）{
 var emailLink = document.querySelector（'＃text'）; 
 var range = document.createRange（）; 
 range.selectNode（emailLink）; 
 window.getSelection（）。addRange（range）; 
 
尝试{
 var successful = document.execCommand（'copy'）; 
 var msg =成功？ '成功'：'失败'; 
 console.log（'复制命令是'+ msg）; 
} catch（err）{
 console.log（'糟糕，无法复制'）; 
} 
 window.getSelection（）。removeAllRanges（）; 
} 
< / script> 
< / body> 
< / html>

解决方案

自Firefox 41（2015年9月）应该在某些可信的（用户触发的）事件触发时默认可用，例如响应按钮点击会触发什么。来自MDN的提供了更多信息，另请参阅。

问题中的代码应该可以工作。事实上，我测试了一些非常相似的东西（请参阅下面的代码），它对我使用Firefox 44的工作非常有帮助。

function doCopy（）{var textToCopy = document.getElementById（'textToCopy'）; var range = document.createRange（）; range.selectNodeContents（textToCopy）; 。window.getSelection（）的AddRange（范围）; 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>>复制上面的文字< /按钮>< textarea placeholder =试着粘贴这里测试>< / textarea>

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.com/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 command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
        window.getSelection().removeAllRanges();
    }
</script>
</body>
</html>

解决方案

As of Firefox 41 (September 2015) the copy command 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 compatibility 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>

这篇关于如何在Mozilla Firefox中单击文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！