webapp实现点击按钮copy(复制)内容的功能
准备一个textarea(基于vuejs)
<textarea v-model='videoUrl' id='copy' style="position:absolute;top:-99999999px"></textarea>
实现代码逻辑如下
function copy() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备
console.log('ios')
window.getSelection().removeAllRanges(); //这段代码必须放在前面否则无效
var copyNode = document.getElementById("copy"); //要复制文字的节点
var editable = copyNode.contentEditable;
var readOnly = copyNode.readOnly;
copyNode.contentEditable = true;
copyNode.readOnly = true;
var range = document.createRange();
// 选中需要复制的节点
range.selectNodeContents(copyNode);
// 执行选中元素
var selection = window.getSelection();
if (selection.rangeCount > 0) {
selection.removeAllRanges();
}
selection.addRange(range);
copyNode.setSelectionRange(0, 999999);
copyNode.contentEditable = editable;
copyNode.readOnly = readOnly;
// 执行 copy 操作
var successful = document.execCommand('copy');
console.log('successful = ', successful);
// alert(successful)
if (successful) {
layer.open({
content: '复制成功^_^',
btn: ['好的'],
yes: function (index) {
layer.closeAll();
}
})
}
// 移除选中的元素
window.getSelection().removeAllRanges();
} else {
var text = document.getElementById("copy").value;
const textarea = document.createElement("textarea");
textarea.style.position = 'fixed';
textarea.style.top = 0;
textarea.style.left = 0;
textarea.style.border = 'none';
textarea.style.outline = 'none';
textarea.style.resize = 'none';
textarea.style.fontSize = '12pt';
textarea.style.background = 'transparent';
textarea.style.color = 'transparent';
textarea.value = text; // 修改文本框的内容
document.body.appendChild(textarea);
textarea.select() // 选中文本
try {
const msg = document.execCommand('copy') ?
'successful' : 'unsuccessful';
// alert(msg)
if (msg == 'successful') {
layer.open({
content: '复制成功^_^',
btn: ['好的'],
yes: function (index) {
layer.closeAll();
}
})
}
} catch (err) { alert('unable to copy', err) }
document.body.removeChild(textarea)
}
}
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 博客( https://www.gowhich.com ),版权所有,侵权必究。
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客( https://www.gowhich.com ),版权所有,侵权必究。