如何在Mozilla Firefox中单击文本？ [英] How can I copy text in one click in 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中单击文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
