如何将文本复制到剪贴板(多浏览器)?
相关:Trello如何访问用户的剪贴板?
如何将文本复制到剪贴板(多浏览器)?
相关:Trello如何访问用户的剪贴板?
当前回答
JavaScript/TypeScript中最简单的方法是使用此命令
navigator.clipboard.writeText(textExample);
只需在textExample中传递要复制到剪贴板的值
其他回答
我喜欢这个:
<input onclick="this.select();" type='text' value='copy me' />
如果用户不知道如何在操作系统中复制文本,那么他们很可能也不知道如何粘贴。因此,只需自动选择它,剩下的留给用户。
由于Chrome 42+和Firefox 41+现在支持document.execCommand('copy')命令,我结合Tim Down的旧答案和Google Developer的答案,创建了两个跨浏览器复制到剪贴板的功能:
函数selectElementContents(el){//复制textarea、pre、div等。if(document.body.createTextRange){//Internet Explorervar textRange=document.body.createTextRange();text范围.移动到元素文本(el);text范围.选择();textRange.execCommand(“复制”);}否则如果(window.getSelection&&document.createRange){//非Internet Explorervar range=document.createRange();range.selectNodeContents(el);var sel=window.getSelection();sel.removeAllRanges();sel.addRange(范围);尝试{var success=document.execCommand('copy');var msg=成功?'success':'不成功';console.log('复制命令为'+msg);}捕获(错误){console.log(“糟糕,无法复制”);}}}//结束函数selectElementContents(el)函数make_copy_button(el){var copy_btn=document.createElement('input');copy_btn.type=“按钮”;el.parentNode.insertBefore(copy_btn,el.nexSibling);copy_btn.onclick=函数(){selectElementContents(el);};if(document.queryCommandSupported(“copy”)||parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {//复制适用于Internet Explorer 4+、Chrome 42+、Firefox 41+、Opera 29+copy_btn.value=“复制到剪贴板”;}其他{//仅适用于Safari和旧版Chrome、Firefox和Operacopy_btn.value=“全选(然后按Ctrl+C复制)”;}}/*注意:document.queryCommandSupported(“copy”)在支持复制的浏览器上应返回“true”,但Chrome版本42到47中存在一个错误,使其返回“false”。所以在那些版本的Chrome功能检测不起作用!看见https://code.google.com/p/chromium/issues/detail?id=476508*/make_copy_button(document.getElementById(“标记”));<pre-id=“markup”>可以通过跨浏览器支持复制或选择的文本。</pre>
如果您想要一个真正简单的解决方案(集成时间不到5分钟),并且开箱即用看起来很好,那么Clippy是一些更复杂解决方案的一个不错的替代方案。
它是由GitHub的一位联合创始人撰写的。Flash嵌入代码示例如下:
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="110"
height="14"
id="clippy">
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}"/>
<param name="bgcolor" value="#{bgcolor}"/>
<embed
src="/flash/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text=#{text}"
bgcolor="#{bgcolor}"/>
</object>
记住用需要复制的文本替换#{text},用颜色替换#{bgcolor}。
这是Chase Seibert答案的扩展,其优点是它适用于IMAGE和TABLE元素,而不仅仅是Internet Explorer 9上的DIV。
if (document.createRange) {
// Internet Explorer 9 and modern browsers
var r = document.createRange();
r.setStartBefore(to_copy);
r.setEndAfter(to_copy);
r.selectNode(to_copy);
var sel = window.getSelection();
sel.addRange(r);
document.execCommand('Copy'); // Does nothing on Firefox
} else {
// Internet Explorer 8 and earlier. This stuff won't work
// on Internet Explorer 9.
// (unless forced into a backward compatibility mode,
// or selecting plain divs, not img or table).
var r = document.body.createTextRange();
r.moveToElementText(to_copy);
r.select()
r.execCommand('Copy');
}
我用过clipboard.js。
我们可以在npm上获得:
npm install clipboard --save
还有Bower
bower install clipboard --save
新ClipboardJS(“#btn1”);document.querySelector(“#btn2”).addEventListener(“click”,()=>document.querySelector(“#btn1”).dataset.clipboardText=Math.random());<script src=“https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/cclipboard.min.js“></script><button id=“btn1”数据剪贴板text=“要复制的文本位于此处”>复制到剪贴板</按钮><button id=“btn2”>单击此处更改数据剪贴板文本</button><br/><br/><input type=“text”placeholder=“粘贴到此处查看剪贴板”/>
更多用法和示例请访问https://zenorocha.github.io/clipboard.js/.