给输入框添加复制粘贴功能,首先想到的就是富文本,但如果我们只要复制粘贴功能而不要其他的功能,而且输入框的内容需要提交呢?
首先我们需要使用到contenteditable属性:
<div contenteditable id='editale'></div>
然后监听这个输入框的粘贴事件:
$('#editable').on('paste',function(event){
$(this).focus();
let ev=event.originalEvent;
let selection=window.getSelection();
if(selection.getRangeAt && selection.rangeCount){
let range=selection.getRangeAt(0);
let imgReg=new RegExp(/image\/.*/);
let fileList=$.map(ev.clipboardData.items,function(file){
if( !imgReg.test(file.type))return;
return file.getAsfile();
});
if(fileList.length<=0) return;
let file=fileList[0];
//上传图片到数据库获取图片路径
let formData=new FormData();
formData.append('file',file);
$.ajax({
url:'xxxxxxx',
type:'POST',
cache:false,
data:formData,
contentType:false,
processData:false,
success:function(res){
let el=document.createElement('div');
el.innerHTML="<img src=' " +res.data+" ' />";
let frag=document.createDocumentFragment(),node,lastNode;
while(node==el.firstChild){
lastNode=frag.appendChild(node);
}
range.insertNode(frag);
if(lastNode){
range=range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
},
error:function(err){
console.error('Upload Error',err);
}
})
}
//阻止粘贴图片直接显示出来
ev.preventDefault();
})