ie11을 사용하지 않는 지금
고객사에서 ie11대응개발 요건이 있어서 vscode 로 대응 개발중에 ie에서 뜬금없는 에러가 발생했다.
잘돌아가던 화면이 갑자기 아래와 같은 에러를 발생했다.
SCRIPT5022: SecurityError
원인 : ie 개발자도 도구를 열어서 발생
해결 : prod 모드로 개발하면 문제 발생하지 않음.
발생원인
atag를 사용하여 선택하는 node를 만들어서 문제 발생.
예제 소스
<ul class="dt-children">
<li data-node-id="5" class="open">
<div class="dt-node" style="padding-left:24px" draggable="true">
<i class="dt-expander visible"></i><label class="dt-checkbox dt-checked"><span class="dt-icon checkbox"></span></label><a class="dt-text-content"><span>5Node 1.1.1</span></a>
</div>
<ul class="dt-children">
<li data-node-id="6" class="">
<div class="dt-node" style="padding-left:36px" draggable="true">
<i class="dt-expander "></i><label class="dt-checkbox dt-checked"><span class="dt-icon checkbox"></span></label><a class="dt-text-content selected"><span>6Node 1.1.1.1</span></a>
</div>
<ul class="dt-children"></ul>
</li>
</ul>
</li>
</ul>해결방법 1
a tag를 그대로 사용할경우.
keydown 이벤트 발생후 .
이벤트 적용할 element에
이벤트가 끝나는 시점에 focus를 다시 주면해결.
element.removeAttribute("tabindex");
element.setAttribute("tabindex", "0");
element.focus();
해결방법 2
css 를 이용하는 방법 .
display:none 이나 visibility:hidden 은 focus를 사라지게함.
영역을 숨기는 작업을 할때는
hidden 일경우
opacity : 0
height: 0
visible 일경우
opacity : 1
height: 100%
해결방법 3
제일 쉬운 방법.
a tag를 다른 태그(span, div)로 교체 하면됨.
javascript 호출한 함수 확인
1. 확인 할려는 함수에서 아래와 같이 하면 확인 가능
console.log(arguments.callee.caller.name)
단점 : strict mode 에서 사용안됨
2. 호출한 메소드 전체 확인(쉬움)
일부러 에러를 만들어서 확인
try{
asdf
}catch(e){
console.log(e)
}
단점 : ie에서 사용안됨
장점 : stack trace를 확인가능
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>