Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
 

(시리즈 글이 4개 있습니다.)
웹: 34. Edge 브라우저도 지원하는 클립보드 복사를 위한 자바스크립트 코드
; https://www.sysnet.pe.kr/2/0/11093

.NET Framework: 841. Windows Forms/C# - 클립보드에 RTF 텍스트를 복사 및 확인하는 방법
; https://www.sysnet.pe.kr/2/0/11929

.NET Framework: 858. C#/Windows - Clipboard(Ctrl+C, Ctrl+V)가 동작하지 않는다면?
; https://www.sysnet.pe.kr/2/0/12009

닷넷: 2333. C# - (Console 유형의 프로젝트에서) Clipboard 연동
; https://www.sysnet.pe.kr/2/0/13925




Edge 브라우저도 지원하는 클립보드 복사를 위한 자바스크립트 코드

제 웹 사이트에서 글 읽기를 해보면, 제목 옆에 "링크 복사"라는 것을 두었습니다. Internet Explorer까지만 해도 그 버튼을 누르면 클립보드에 복사할 수 있었는데 Edge 웹 브라우저로 오면서 그 기능이 동작하지 않게 되었습니다.

이제 좀 바뀌었을까 싶어서 검색해 봤더니... ^^ 오호, Edge까지 지원하는 클립보드 자바스크립트 코드가 있습니다. ^^

clipboard.js
; https://clipboardjs.com/
; https://github.com/zenorocha/clipboard.js

적용도 매우 쉽습니다.

다음의 압축 파일을 받아 해제하고,

clipboard.js
; https://github.com/zenorocha/clipboard.js/archive/master.zip

/dist 폴더에 있는 clipboard.min.js 파일을 복사해 여러분들의 웹 사이트에 추가하고, 원하는 페이지에 script 태그로 연결합니다.

<script type="text/javascript" src="/scripts/clipboard.min.js"></script>

그다음, 사용자가 click 동작을 했을 때 클립보드로 텍스트를 복사할 HTML 요소를 명시하는 스크립트를 작성합니다.

<span id="clipboardButton" data-clipboard-text="test is good"" style="cursor: pointer">복사</span>

<script type="text/javascript">
var clipboard = new Clipboard('#clipboardButton');
</script>

위의 스크립트는 span 영역을 사용자가 마우스로 누르면, 즉 "복사"라는 텍스트를 마우스로 누르면 span 태그 내 "data-clipboard-text" 요소의 텍스트인 "test is good" 문자열을 클립보드로 복사해 줍니다. (그 외에도 다양한 문자열 복사 방식을 지원하는데 자세한 것은 문서를 참고하세요.)




이 라이브러리는 Selection과 execCommand API에 의존한다고 하는데, Selection의 경우 현재 모든 브라우저에서 지원된다고 하며 execCommand의 경우 Chrome 42+, Edge 12+, Firefox 41+, IE 9+, Opera 29+, Safari 10+에서 지원한다고 합니다.

그런데, Edge에 버전이 있었나요?

확인해 보니까 Settings 부분에 다음과 같이 EdgeHTML이라는 것으로 14.14393이라는 버전이 있습니다.

edge_clipboard_1.png

아마도 저것이 Edge의 버전이 아닐까 싶습니다. ^^




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 3/28/2025]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13953정성태6/16/202532스크립트: 78. 파이썬 - 소스 코드의 파일 경로를 지정한 모듈 로드
13952정성태6/15/2025354닷넷: 2336. C# - IValueTaskSource로 인해 주의가 필요한 ValueTask 호출파일 다운로드1
13951정성태6/15/2025326오류 유형: 964. Outlook - 일정이 "You cannot make changes to contents of this read-only folder." 오류 메시지로 삭제가 안 되는 경우
13950정성태6/12/20251175닷넷: 2335. C# - 간단하게 구현해 보는 IValueTaskSource 예제파일 다운로드1
13949정성태6/11/2025987오류 유형: 963. SignTool - "Error: SignerSign() failed." (-2146869243/0x80096005)
13948정성태6/10/2025635오류 유형: 962. 파이썬 - Linux 환경 + TCP 서버 소켓을 사용하는 프로세스 종료 후 재실행하는 경우 "OSError: [Errno 98] Address already in use" 오류 발생
13947정성태6/9/20251384개발 환경 구성: 750. 파이썬 - Azure App Service에 응용 프로그램 배포 후의 환경
13946정성태6/9/20251613개발 환경 구성: 749. 파이썬 - Azure App Service에 응용 프로그램 배포하기 전의 환경
13945정성태6/7/20251531오류 유형: 961. 파이썬 + conda - mysqlclient 사용 시 "NameError: name '_mysql' is not defined" 에러
13944정성태6/7/20255273오류 유형: 960. The trust relationship between this workstation and the primary domain failed. - 네 번째 이야기
13943정성태6/6/20251753개발 환경 구성: 748. Windows + Foundry Local - 로컬에서 AI 모델 활용
13942정성태6/5/20251415오류 유형: 959. winget 설치 시 "0x80d02002 : unknown error"
13941정성태6/2/20251343닷넷: 2334. C# - cpuid 명령어를 이용한 CPU 제조사 문자열 가져오기파일 다운로드1
13940정성태6/1/20251731C/C++: 188. C++의 32비트 + Release 어셈블리 코드를 .NET으로 포팅할 때 주의할 점파일 다운로드1
13939정성태5/29/20252112오류 유형: 958. NVIDIA Triton Inference Server - version `GLIBCXX_3.4.32' not found (required by /opt/tritonserver/backends/python/triton_python_backend_stub)
13938정성태5/29/20251638개발 환경 구성: 747. 파이썬 - WSL/docker에 구성한 Triton 예제 개발 환경
13937정성태5/24/20251524개발 환경 구성: 746. Windows + WSL2 환경에서 (tensorflow 등의) NVIDIA GPU 인식
13936정성태5/23/20251385개발 환경 구성: 745. Linux / WSL 환경에 Miniconda 설치하기
13935정성태5/20/20251328오류 유형: 957. 파이썬 - pip 사용 시 "ImportError: cannot import name 'html5lib' from 'pip._vendor'" 오류
13934정성태5/20/20251841스크립트: 77. 파이썬 - 'urllib.request' 모듈의 명시적/암시적 로딩 차이
13933정성태5/19/20251459오류 유형: 956. Visual Studio 2022가 17.12 버전부터 업데이트 되지 않는다면?
13932정성태5/18/20251704스크립트: 76. 파이썬 - Version 문자열 다루기(semver 패키지)
13931정성태5/17/20252004스크립트: 75. 파이썬 - Cython 기본 예제 및 컴파일
13930정성태5/17/20251698개발 환경 구성: 744. 파이썬 - Windows embeddable package 환경에서 외부 패키지 사용하는 방법(ex: UFO² 환경 구성)
13929정성태5/16/20251780오류 유형: 955. 파이썬 - "Windows embeddable package" REPL 환경에서 "NameError: name 'exit' is not defined"
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...