성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
글쓰기
제목
이름
암호
전자우편
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>
첨부파일
스팸 방지용 인증 번호
1068
(왼쪽의 숫자를 입력해야 합니다.)