성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Reordering on an Alpha processor ;...
[정성태] 공유 감사합니다. ^^ 참고로, WPF에서 WindowsF...
[Tom Lee] 답변 감사합니다. 나름의 해결책 연구해보고 여기에도 공유해봅니다...
[정성태] 아래의 글을 보면, MoveWindow 하면 될 듯한데요. ^^...
[Tom Lee] 안녕하세요 올려주신 글 참고하여 WPF 어플리케이션 안에 Uni...
[정성태] A graphical depiction of the steps ...
[정성태] 질문을 주셔서 출판사 측에 문의를 했습니다. 약 한 달 정도 후...
[Thorondor
] @정성태 개인 블로그인데도 거의 커뮤니티 급 인 것 같아요. 요...
[정성태] Roll A Lisp In C - Reading ; https...
[정성태] Java - How to use the Foreign Funct...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Edge 브라우저도 지원하는 클립보드 복사를 위한 자바스크립트 코드</h1> <p> <a target='tab' href='http://www.sysnet.pe.kr/2/0/11093'>제 웹 사이트에서 글 읽기를 해보면</a>, 제목 옆에 "링크 복사"라는 것을 두었습니다. Internet Explorer까지만 해도 그 버튼을 누르면 클립보드에 복사할 수 있었는데 Edge 웹 브라우저로 오면서 그 기능이 동작하지 않게 되었습니다.<br /> <br /> 이제 좀 바뀌었을까 싶어서 검색해 봤더니... ^^ 오호, Edge까지 지원하는 클립보드 자바스크립트 코드가 있습니다. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > clipboard.js ; <a target='tab' href='https://clipboardjs.com/'>https://clipboardjs.com/</a> ; <a target='tab' href='https://github.com/zenorocha/clipboard.js'>https://github.com/zenorocha/clipboard.js</a> </pre> <br /> 적용도 매우 쉽습니다.<br /> <br /> 다음의 압축 파일을 받아 해제하고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > clipboard.js ; <a target='tab' href='https://github.com/zenorocha/clipboard.js/archive/master.zip'>https://github.com/zenorocha/clipboard.js/archive/master.zip</a> </pre> <br /> /dist 폴더에 있는 clipboard.min.js 파일을 복사해 여러분들의 웹 사이트에 추가하고, 원하는 페이지에 script 태그로 연결합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <script type="text/javascript" src="/scripts/clipboard.min.js"></script> </pre> <br /> 그다음, 사용자가 click 동작을 했을 때 클립보드로 텍스트를 복사할 HTML 요소를 명시하는 스크립트를 작성합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <span id="<span style='color: blue; font-weight: bold'>clipboardButton</span>" <span style='color: blue; font-weight: bold'>data-clipboard-text="test is good"</span>" style="cursor: pointer">복사</span> <script type="text/javascript"> var clipboard = <span style='color: blue; font-weight: bold'>new Clipboard('#clipboardButton');</span> </script> </pre> <br /> 위의 스크립트는 span 영역을 사용자가 마우스로 누르면, 즉 "복사"라는 텍스트를 마우스로 누르면 span 태그 내 "data-clipboard-text" 요소의 텍스트인 "test is good" 문자열을 클립보드로 복사해 줍니다. (그 외에도 다양한 문자열 복사 방식을 지원하는데 자세한 것은 <a target='tab' href='https://clipboardjs.com/'>문서를 참고</a>하세요.)<br /> <br /> <hr style='width: 50%' /><br /> <br /> 이 라이브러리는 <a target='tab' href='http://caniuse.com/#search=selection'>Selection</a>과 execCommand API에 의존한다고 하는데, Selection의 경우 현재 모든 브라우저에서 지원된다고 하며 execCommand의 경우 Chrome 42+, Edge 12+, Firefox 41+, IE 9+, Opera 29+, Safari 10+에서 지원한다고 합니다.<br /> <br /> 그런데, Edge에 버전이 있었나요?<br /> <br /> 확인해 보니까 Settings 부분에 다음과 같이 EdgeHTML이라는 것으로 14.14393이라는 버전이 있습니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='edge_clipboard_1.png' src='/SysWebRes/bbs/edge_clipboard_1.png' /><br /> <br /> 아마도 저것이 Edge의 버전이 아닐까 싶습니다. ^^<br /> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1006
(왼쪽의 숫자를 입력해야 합니다.)