首页 > javascript学习 > js中document的execCommand方法
2019
03-07

js中document的execCommand方法

该方法允许运行命令来操纵可编辑(只能操作input和textarea标签)内容区域的元素

document.execCommand(命令),返回一个bool值

使用select()方法选中所有文本:

copy:拷贝当前选中内容到剪贴板
cut:剪贴当前选中的文字并复制到剪贴板
delete:删除选中部分.
forwardDelete:删除光标所在位置的字符,相当于按一下删除键
selectAll:选中编辑区里的全部内容,当编辑区域获得焦点时使用效果和使用select()相同。
undo:撤销最近执行的命令。
redo:重做被撤销的操作。

当前端开发中需要使用js复制文字时,如果需要复制的文字不是input或者textarea标签内容,我们可以在html文件中

    1、创建一个input或者textarea并隐藏,不能使用display:none或者宽高为0隐藏(亲测chrome上不行):
        input{position:absolute/fixed;top:0;left:0;opacity: 0;z-index:-10;}
    2、input.value=p.innerHTML,
    3、input.select()选中input的内容
    4、document.execCommand('copy')复制文本

一个复制函数的实例

function copy(id,attr='innerHTML',start='',end=''){
/**
 * 复制函数
 * @param  {String} id [需要copy的标签ID]
 * @param  {String} attr [需要copy的属性值]
 * @param  {String} start [需要在copy内容之前添加的文字]
 * @param  {String} end [需要在copy内容之后添加的文字]
 */
//获取要复制的文本
var copy_str=attr=='innerHTML' ? document.getElementById(id).getAttribute(attr) : document.getElementById(id).innerHTML;
copy_str=start+copy_str+end;
//创建一个textarea节点
var textarea = document.createElement('textarea');
//为textarea节点添加style属性
textarea.setAttribute('style','position:fixed;top:0;left:0;opacity:0;z-index:-10;');
//把要复制的文本添加到textarea节点中
text=document.createTextNode(copy_str);
textarea.appendChild(text);
//把textarea节点添加到body节点中
document.body.appendChild(textarea);
//选中textarea节点的文本内容
textarea.select();
//执行复制命令
if(document.execCommand('copy')){
    alert('复制成功');
}else{
    alert('复制失败');
}
//复制完成后从body节点删除textarea节点
document.body.removeChild(textarea);
}
最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。