이 튜토리얼은 이제 구식입니다. Javascript 복사 및 붙여 넣기에서 자세한 정보를 찾을 수있는 기본 브라우저 복사 및 붙여 넣기 기능을 사용하는 것이 좋습니다.
최근 프로젝트에서는 사용자의 클립보드에 텍스트를 복사하는 단추를 만들어야 했습니다. 버튼 클릭 이벤트에서 이것을 만들려고 할 때 Javascript 또는 jQuery로 하고 싶었습니다. 이 문제에 대한 조사를 실시한 결과, 보안 때문에 클립보드에 JavaScript를 복사할 수 없다는 것을 알게 되었습니다. 이는 jQuery가 텍스트를 클립보드에 복사할 수 없다는 것을 의미하기도 했습니다. 그래서 다른 방법을 찾아야 했습니다. 한참 검색해보니 지투브에서 호스팅되는 jQuery 플러그인이 ZeroClipboard입니다.
Adobe 플래시와 Javascript 인터페이스를 사용하여 클립보드에 텍스트를 처리하는 방법을 제공하는 라이브러리입니다. 플래시를 설치하고 보안 설정에 동의해야 하므로 플래시가 컴퓨터 클립보드에 액세스할 수 있으므로 플래시를 사용하여 클립보드에 액세스해야 합니다. Javascript를 플래시 인터페이스로 사용하여 버튼 클릭 이벤트를 통해 시작할 수 있습니다. ZeroClipboard는 Github의 프로젝트 페이지에서 다운로드할 수 있습니다. ZeroClipboard Github은 실제로 자체 사이트에서 ZeroClipboard 프로젝트를 사용하여 리포지토리의 URL을 복사할 수 있습니다.
ZeroClipboard 사용법
먼저 ZeroClipboard 저장소에서 Javascript와 플래시 파일을 모두 다운로드해야 합니다. 그런 다음 일부 Javascript 파일만 포함하여 페이지에 추가할 수 있습니다.
<html>
<body>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>
그런 다음 main.js 파일에서 ZeroClipboard에 사용된 클라이언트를 생성하여 텍스트를 클립보드에 복사해야 합니다.
// main.js
var client = new ZeroClipboard( document.getElementById("copy-button"), {
moviePath: "/path/to/ZeroClipboard.swf"
} );
client.on( "load", function(client) {
// alert( "movie is loaded" );
client.on( "complete", function(client, args) {
// `this` is the element that was clicked
this.style.display = "none";
alert("Copied text to clipboard: " + args.text );
} );
} );
다음 예제는 복사할 텍스트를 설정할 수 있는 3가지 방법, Javascript에서 텍스트를 설정하거나 텍스트를 복사할 대상 영역을 설정할 수 있는 방법 또는 HTML 데이터 특성을 사용하여 텍스트를 설정할 수 있는 방법을 보여줍니다.
Set Text In Code
Javascript 코드의 텍스트를 설정하려면 먼저 클릭 이벤트를 첨부할 수 있도록 버튼을 새로 만듭니다.
<button id="click-to-copy">Click To Copy</button>
Javascript에서 ZeroClipboard 클라이언트를 설정하고 버튼 클릭 이벤트에 텍스트를 설정할 수 있습니다. 먼저 ZeroClipboard 클라이언트를 설정하고 SWF 파일의 동영상 경로를 첨부해야 합니다. 버튼의 JQuery 객체를 ZeroClipboard 객체의 생성자로 전달하기만 하면 됩니다.
var client = new ZeroClipboard( $("#click-to-copy"), {
moviePath: "zeroclipboard/ZeroClipboard.swf",
debug: false
} );
이제 이 클라이언트 개체를 사용하여 ZeroClipboard 버튼의 클릭 이벤트에 대한 텍스트를 설정할 수 있습니다. setText() 방법을 사용하여 Javascript 코드에 텍스트를 설정할 수 있습니다.
client.on( "load", function(client)
{
$('#flash-loaded').fadeIn();
client.on( "complete", function(client, args) {
client.setText( "Set text copied." );
$('#click-to-copy-text').fadeIn();
} );
} );
Set Copy Target
복사 대상을 사용하면 복사할 텍스트를 가져올 수 있는 HTML 요소를 정의할 수 있으며, 사용할 값은 요소의 값, 내부 값이 될 수 있습니다.HTML 또는 textContent입니다. 이것은 복사할 요소의 ID 값을 가진 데이터 클립보드 타겟의 데이터 특성에서 작동합니다.
<button id="target-to-copy" data-clipboard-target="clipboard-text">Click To Copy</button>
<textarea name="clipboard-text" id="clipboard-text" cols="30" rows="10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacus nibh, ac sollicitudin sapien accumsan in. Mauris euismod posuere tellus luctus sodales.
Fusce a consectetur massa, non tincidunt mauris. Phasellus a rutrum libero. Praesent tempus urna et nisi aliquam convallis. Fusce porttitor justo condimentum orci euismod, pulvinar congue magna vestibulum.
Sed gravida eleifend justo, id ultrices tellus porttitor nec. Nam porttitor gravida tempor. In libero ante, euismod ac fermentum nec, gravida ut dolor. Nullam a pulvinar ligula.
Phasellus euismod rutrum risus non dapibus. Nullam pretium mauris vel fringilla pretium. Mauris faucibus risus vitae nulla dignissim imperdiet.
Pellentesque elementum venenatis arcu, ut bibendum risus varius nec. Fusce eu tincidunt nunc. Duis sagittis dolor congue mauris tincidunt, eu condimentum eros rhoncus.
</textarea>
ZeroClipboard 클라이언트를 대상-복사 버튼에 연결하도록 설정했습니다. ZeroClipboard는 data-clipboard-target 속성을 검색하고 이 값을 사용하여 텍스트를 복사합니다.
var clientTarget = new ZeroClipboard( $("#target-to-copy"), {
moviePath: "http://www.paulund.co.uk/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.swf",
debug: false
} );
clientTarget.on( "load", function(clientTarget)
{
$('#flash-loaded').fadeIn();
clientTarget.on( "complete", function(clientTarget, args) {
clientTarget.setText( args.text );
$('#target-to-copy-text').fadeIn();
} );
} );
ZeroClipboard 클라이언트를 Target-to-Copy 버튼에 부착하도록 설정합니다. ZeroClipboard는 데이터 클립보드 대상 특성을 검색하고 이 값을 사용하여 복사할 텍스트를 가져옵니다.
Set Copy Text
복사 텍스트 설정 버튼은 복사할 텍스트를 정의하는 다른 데이터 특성을 사용합니다.
<button id="text-to-copy" data-clipboard-text="Click To Copy!">Click To Copy</button>
여기에 필요한 Javascript는 대상 예제와 동일합니다. 코드화해야 하는 코드가 args.text 속성에 배치되어 있습니다. 그러면 setText() 메소드에서 클립보드에 복사할 수 있습니다.
var clientText = new ZeroClipboard( $("#text-to-copy"), {
moviePath: "http://www.paulund.co.uk/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.swf",
debug: false
} );
clientText.on( "load", function(clientText)
{
$('#flash-loaded').fadeIn();
clientText.on( "complete", function(clientText, args) {
clientText.setText( args.text );
$('#text-to-copy-text').fadeIn();
} );
} );'SW > JavaScript' 카테고리의 다른 글
| Java Script, jQuery : 스크립트 동적 로드 : 방법, 예제, 구현 (0) | 2020.06.07 |
|---|---|
| Java Script, jQuery : Adaptive Backgrounds jQuery Plugin : 예제, 구현, 방법 (0) | 2020.05.31 |
| Java Script, jQuery : element 크기 변경 : 방법, 예제, 구현 (0) | 2020.05.29 |
| Java Script, jQuery : 암호 강도 표시 기능 : 예제, 구현, 방법 (0) | 2020.05.28 |
| Java Script, jQuery : 느린 소셜 미디어 버튼 로드 : 예제, 개념, 방법 (0) | 2020.05.27 |