不多说,直接先上代码,
function copy2Clipboard(content) {
if (window.navigator && window.navigator.clipboard) {
navigator.clipboard.writeText(content).then(() => {
console.log('success')
}, () => {
console.log('failed')
console.log(arguments)
}).catch(e => {
console.log(e)
})
} else {
var i = document.createElement("input")
i.setAttribute("style", "position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;")
document.body.appendChild(i)
i.value = content
var t = i.contentEditable,
n = i.readOnly,
o = document.createRange();
i.contentEditable = !0
i.readOnly = !1
o.selectNodeContents(i);
var a = window.getSelection();
a.removeAllRanges()
a.addRange(o)
i.setSelectionRange(0, 999999)
i.contentEditable = t
i.readOnly = n
window.document.execCommand("Copy")
i.blur()
document.body.removeChild(i)
i = null
}
}
坑
- 部分浏览器对navigator.clipboard支持很差,建议用else的代码;
- Safari如果要访问剪贴板,需要在可信的HTTPS环境下执行,自签的证书是无法调用
execCommand
/avigator.clipboard.writeText
的
附录:一个之前写的有注释的版本
function copyToClipboard(text) {
if (text === "") return;
var ipt = document.createElement('input'); // maybe you need to change `input` to `textarea`
ipt.setAttribute(
'style',
'position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;'
)
document.body.appendChild(ipt)
ipt.value = text
// ipt.select()
if (/iphone|ipad|ios/.test(navigator.userAgent.toLowerCase())) {
var oldContentEditable = ipt.contentEditable
var oldReadOnly = ipt.readOnly
var range = document.createRange()
ipt.contentEditable = true
ipt.readOnly = false
range.selectNodeContents(ipt)
var s = window.getSelection()
s.removeAllRanges()
s.addRange(range)
ipt.setSelectionRange(0, 999999) // A big number, to cover anything that could be inside the element.
ipt.contentEditable = oldContentEditable
ipt.readOnly = oldReadOnly
} else {
ipt.select()
}
window.document.execCommand('Copy')
ipt.blur()
document.body.removeChild(ipt)
ipt = null
}