我想要一个按钮来选择 a 中的文本textarea并将其复制到剪贴板。我似乎找不到任何适用于所有浏览器且不使用 Flash 的解决方案。
这肯定是可行的吗？我到处都看到它，但我猜他们使用flash灯，如果可能的话，我真的想远离它，因为有些人没有它。
这就是我到目前为止所拥有的 - 它只是选择文本：
function copyCode() {
$("#output-code").focus();
$("#output-code").select();
}
（重点不是绝对必要的）
不使用 flash 将所选文本复制到剪贴板 - 必须跨浏览器
IT技术
javascript
jquery
copy
clipboard
2021-01-24 09:21:00
5个回答
execCommand('复制')
有一个非常新的选择。它是跨浏览器的，但在每个人都更新他们的浏览器之前需要时间。
它通过使用该document.execCommand('copy');函数来工作。使用此功能，您将复制选择的文本。这不仅会为工作textarea秒，但与网页上的每一个选择的文本（如在span，p，div等）。
适用于 Internet Explorer 10+、Chrome 43+、Opera 29+ 和 Firefox 41+（请参阅此处的execCommand兼容性）。
例子
// Setup the variables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {
// Select some text (you could also create a range)
textarea.select();
// Use try & catch for unsupported browser
try {
// The important part (copy selected text)
var ok = document.execCommand('copy');
if (ok) answer.innerHTML = 'Copied!';
else answer.innerHTML = 'Unable to copy!';
} catch (err) {
answer.innerHTML = 'Unsupported Browser!';
}
});<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>
<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
这个答案虽然在 2011 年是准确的，但现在已经过时了。参见 arc 的回答，或https://stackoverflow.com/a/30810322/489560
您必须使用不想使用的 Flash 插件来自动将文本复制到客户端的剪贴板。浏览器是这样设计的，因为网站在没有 active-x 组件帮助的情况下自动修改客户端的剪贴板是一个安全问题。请注意，active-x 组件是在用户机器上运行的程序，从技术上讲，需要用户同意才能安装。考虑到剪贴板是一个操作系统组件，很高兴网络浏览器默认不允许网站劫持它。
如果用户没有 Flash、禁用了 Flash 或禁用了 active-x，那么他或她可能对安全性有疑虑，并且无论如何都不希望您弄乱他或她的键盘。那时，用户将习惯于在网站中没有太多自动或基于脚本的功能。最好不要试图公开违背最终用户的意愿。
请参考以下 Stack Overflow 链接：
最终的答案是使用零剪贴板，这是一个使用小的、不可见的 Flash 电影和 JavaScript 的库，可以像您想要的那样使用剪贴板功能。该库在此处可用：https : //github.com/zeroclipboard/zeroclipboard第二个链接显示了如何检测 Flash 是否被禁用或未安装，它允许您像对 JavaScript 一样显示警告消息。
现在我们有了@zenorocha 的Clipboard.js
要使用它，请下载并调用 page.html 上的脚本（或使用 bower 或 npm 安装）
<script src="path_to_script/clipboard.min.js"></script>
在你的 script.js 上实例化一个新的触发器
new Clipboard('.trigger');
并去那里查看一些使用示例：http: //zenorocha.github.io/clipboard.js/#usage
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
textArea.id = 'ta';
document.body.appendChild(textArea);
//textArea.select();
var range = document.createRange();
range.selectNode(textArea);
textArea.select();
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
} catch (err) {
alert('Oops, unable to copy');
}
document.body.removeChild(textArea);
return successful;
}
我希望这有帮助
这是一个相当晚的响应，但对于那些将来搜索并且在实现 execCommand('copy') 事件以适用于桌面和移动设备时遇到问题的人。
跨浏览器，移动友好，无需外部资源或程序
function CopyString(){
var StringToCopyElement = document.getElementById('YourId');
StringToCopyElement.select();
if(document.execCommand('copy')){
StringToCopyElement.blur();
}else{
CopyStringMobile();
}
}
function CopyStringMobile(){
document.getElementById("YourId").selectionStart = 0;
document.getElementById("YourId").selectionEnd = 999;
document.execCommand('copy');
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
}
将 CopyString() 函数设置为您要触发事件的任何对象的点击事件。这可用于移动和桌面操作系统。
解释
您需要有两种不同的方法来选择要复制的字符串，因为截至今天，通过桌面进行复制的方法不适用于移动设备。我有一个 if then 函数来捕获桌面方法是否有效，如果无效，则触发适用于移动设备的代码。此方法不需要下载或链接。这两种方法都会突出显示您要复制的文本，然后将复制命令触发到剪贴板，然后取消选择您要复制的字符串。您可以根据自己的喜好混合代码，但这是这样做的方式。