html5 复制粘贴,H5 复制粘贴 - execCommand

window.clipboardData (IE 才有)

是个很好用的对象, 但是 只在 IE 才有,

IE 被吐糟了一万年, 才发现他有个不错的地方.

IE 即将退出历史, 找点其他的吧.

简介

当文档对象被转换为设计模式的时候(选中，设置contentEditable等)，文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作

(如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable，通过执行execCommand

方法可以对当前活动元素进行很多操作。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

今天咱们只会用到 copy .

简介里说 当文档对象被转换为设计模式的时候(选中，设置contentEditable等)，文档对象提供了一个execCommand方法.

但是咱们根本不想出现一个 textarea 好嘛, 否则和window.prompt有啥区别呢?

最简单最有效的方式就是把 textarea 给隐藏起来嘛

const copy = text => {

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.background = 'transparent'

textarea.style.color = 'transparent'

textArea.value = text

document.body.appendChild(textarea)

textArea.select()

try {

const msg = document.execCommand('copy') ? 'successful' : 'unsuccessful'

console.log(msg)

} catch (err) {

console.log('unable to copy', err)

}

document.body.removeChild(textarea)

}

demo

手机端文案复制

body{ max-width: 640px; margin: 0 auto;}

.copy-pp{ color: #666; line-height: 1.2;}

.copy-btn{ background-color: cornflowerblue; color: #fff;}

.copy-text{ opacity: 0;}

即使是一块牛肉，也应该有自己的态度，要慎其独，要善其身，要知道精彩的人生不能只有精肉，

还要有适宜的肥油做调配，有雪白的肉筋做环绕，并且还要掌握跳进煎锅时的角度，姿势，以及火候，

才能最终成为一块优秀道地的西冷牛排~

点击复制分享链接

function jsCopy(obj){

var u = navigator.userAgent;

//苹果

if (u.match(/(iPhone|iPod|iPad);?/i)) {

var copyDOM = document.getElementById("copy-pp"); //要复制文字的节点

var range = document.createRange();

// 选中需要复制的节点

range.selectNode(copyDOM);

// 执行选中元素

window.getSelection().addRange(range);

// 执行 copy 操作

var successful = document.execCommand('copy');

try {

var msg = successful ? '成功' : '失败';

console.log(msg);

} catch(err) {

console.log(err);

}

// 移除选中的元素

window.getSelection().removeAllRanges();

obj.innerHTML = '已复制';

}

// 安卓

if(u.indexOf('Android') > -1 ){

var $copyText = document.getElementById("copy-text"),

$copyPP = document.getElementById("copy-pp");

$copyText.innerHTML = $copyPP.innerHTML.replace(/]+>/g,"");

$copyText.select(); // 选择对象

document.execCommand("Copy"); // 执行浏览器复制命令

obj.innerHTML = '已复制';

}

// 安卓系统的UC浏览器

if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){

obj.innerHTML = '点击复制分享链接';

alert('若点击复制分享链接无效，请长按内容手动复制！');

}

}