剪切板在哪

浏览器复制、剪切、粘贴事件简单操作⽰例

更多参考:

复制、剪切、粘贴事件：

copy发⽣复制操作时触发;

cut发⽣剪切操作时触发;

paste发⽣粘贴操作时触发;

每个事件都有⼀个before事件对应：beforecopy、beforecut、beforepaste;

这⼏个before⼀般不怎么⽤，所以我们把注意⼒放在三个事件就可以了。

copy复制操作:

copy事件使⽤⽰例：

gg我真快乐 gwgzgf

=e=>{

//监听全局复制做点什么

(e)

};

我们可以看到事件对象中的属浙江高考试卷 性：

我们主要研究的是⾥⾯的clipboardData属性对象

clipboardData对象:⽤于访问以及修改剪贴板中的数据

clipboardData对象中有两个⽅法：

tData():常配合copy事件使⽤，⽤于设置到剪贴板中的值

getData():常配合paste事件使⽤，⽤于获取设置到剪贴板中的值

不同浏览器，所属的对象不同：在IE

中这个对象是window对象的属性，在Chrome、Safari和Firefox中，这个对象是相应的event对象的属性。所以我们在使⽤的时候，需要做⼀下如下兼容:

=e=>{

letclipboardData=ardData||ardData;

//获取clipboardData对象+dosomething

};

copy配合getSelection实现复制某段⽂本

gggwgzgf

=e=>{

(ection().toString())

letcopyMsg=ection().toString()

//把值设置到剪贴板中，⽅便paste事件触发去拿

a("Text",copyMsg);

};

注意：ection().toString()我是调⽤toString()⽅法转成⽂本的，如果不调⽤这个⽅法，直接通过ection()取到值存到剪贴板会有出奇

的效果，会连同效果⼀起粘贴(⽐如html格式的,会隐性地把什么都复制进去)，需要配合paste事件

paste粘贴事件

gggwgzgf

=e=>{

(ection().toString())

letcopyMsg=ection().toString()

a("Text",copyMsg);

};

e=function(e){

vardata=a("Text")

elector("input").value=data

}

通过pat事件获取剪切板中的图⽚：

ntListener('paste',function(event){

varite红星闪闪串词 ms=(ardData&&)||[];

varfile=null;

if(items&&){

for(vari=0;i<;i++){

if(items[i].f('image')!==-1){

file=items[i].getAsFile();

break;

}

}

}

(file)

});

解释：当粘贴事件触发时遍历剪切版对象（clipboard台风蔷薇 Data）中的所有items，找到类型为图⽚的item并调⽤getAsFile⽅法得到⽂件对象

拿到file对象后我们有⼏种选择：

通过fileReader得到⽂件对象的ba64字符串

varreader=newFileReader();

=f最近看的小说 unction(e){

//通过取到ba64然后上传

//作为src设到image标签上预览

}

DataURL(file);//此处的file为上⾯得到的⽂件对象```

通过f一喝咖啡就拉肚子 ormData⽂件对象转换为⼆进制数据

varformData=newFormData();

('file',file);

通过ObjectURL转成url地址预览

varblobUrl=ObjectURL(file)

⽰例代码：

ntListener('paste',function(event){

varitems=(ardData&&)||[];

varfile=null;

if(items&&){

for(vari=0;i<;i++){

if(items[i].f('image')!==-1){

file=items[i].getAsFile();

break;

}

}

}

v好看的校园文 arblobUrl=ObjectURL(file);

mentById("imgTest").src=blobUrl;

}压白实线怎么处罚 );

局限性：

对于qq，微信等的截图或者按printscreen得到的截图，还有任意⽹页的右击复制图⽚都能完美⽀持，但是，对于电脑本地图⽚⽂件的复制没办法从剪切版获取

到