javascript paste 할 값을 얻는 방법
그리드를 만드는중에 그리드에 붙여 넣기를 구현해야 하는 방법이 필요했다
그리드는 input 이나 textarea가 아닌 div태그여서 붙여 넣기 이벤트가 통하지 않았다.
그래서 살짝 우회 방법으로 구현을 했다.
구현방법은
keydown 이벤트를 잡아서 이벤트 실행되면 input이나 textarea에 foucs를 이동시키고
이동 시킨후에 input에 paste 이벤트를 잡을수 있다 .
여기까지가 설명 이제 . 코드.
<!doctype html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
</HEAD>
<BODY>
<table style="width:100%">
<colgroup>
<col style="width:45%;">
<col style="width:50px;">
<col style="width:45%;">
</colgroup>
<tr>
<td>
<input id="hiddenPasteText" text="">
<div id="pasteArea" tabindex="-1" style="width:100%;height:200px; border:1px solid #000;">
붙여 넣기 공간
ctrl +v
</div>
</td>
<td></td>
<td>
<div id="textArea" style="width:100%;height:200px; border:1px solid #000;">
paste 장소
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
<script>
$(function (){
// keydown event
$(window).on("keydown", function (e) {
var evtKey = window.event ? e.keyCode : e.which;
if (e.metaKey || e.ctrlKey) {
if(evtKey==86){ // ctrl + v
$('#hiddenPasteText').focus();
return true;
}
}
});
// paste 처리
$('#hiddenPasteText').on('paste', function (e){
var orginEvt = e.originalEvent;
var content ='';
if( orginEvt.clipboardData && orginEvt.clipboardData.getData ){
content = orginEvt.clipboardData.getData('text');
}else if( e.clipboardData && e.clipboardData.getData ){
content = e.clipboardData.getData('text/plain');
}else if( window.clipboardData && window.clipboardData.getData ){
content = window.clipboardData.getData('Text');
}
$('#textArea').html(content);
})
})
</script>