前言
js如何複製文本到粘貼板呢,網上所說的各種複製。。在Chrome或者說在我這個項目都沒用。
- windows.copy
- document.execCommand(“copy”);
- clipboard.js
Clipboard.writeText()
,可行!
網上的代碼
通過 document.execCommand('copy')
來操作。
//創建選中範圍
var range = document.createRange();
range.selectNode(copyDom);
//移除剪切板中內容
window.getSelection().removeAllRanges();
//添加新的內容到剪切板
window.getSelection().addRange(range);
//複製
var successful = document.execCommand('copy');
通過 window.clipboardData.setData('Text',textVal)
這個 對象來操作的。可是都不work。
/**
* 複製代碼
*/
$('#btnCopy').bind('click', function (e) {
if (!$.isEmptyObject(codeData)) {
//support IE
var clipboardData = window.clipboardData;
//support Chrome/Firefox
if (!clipboardData) {
clipboardData = e.originalEvent.clipboardData;
}
if (!clipboardData) {
console.log(clipboardData);
console.log(clipboardData.getData('text'));
clipboardData.setData('Text', codeData[id]);
}
if(window != undefined){
window.copy($("#genCodeArea").val());
}
}
});
clipboard.js
拷貝文字
不應當是一件困難的事. 不需要過多繁雜的配置或者下載很多腳本文件. 最重要的,它不應該依賴flash或者其他框架,應該保持簡潔,clipboard.js
- 通過cdn引入
<script src="//cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
- 使用功能
<!-- Target -->
<input id="copyArea" value="https://zhengkai.blog.csdn.net">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#copyArea">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
- 查看效果
- 這個功能正常是可以的,但是可能我用了CodeMirror或者其他js導致衝突。
Clipboard.writeText()
以下場景是來自CodeGenerator的複製功能:
$('#btnCopy').on('click', function(){
if(!$.isEmptyObject(genCodeArea.getValue())&&!$.isEmptyObject(navigator)&&!$.isEmptyObject(navigator.clipboard)){
navigator.clipboard.writeText(genCodeArea.getValue());
layer.msg("複製成功");
}
});
來源:https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
兼容性:Chrome66以上/Firefox63以上
效果展示: