Flash_jquery 없이 jQuery를 사용하여 텍스트를 클립보드에 복사

인터넷에서 특정 텍스트를 클립보드에 복사하는 방법에 대한 해결책을 찾으면 플래시를 사용하는 것이 가장 가능성이 높습니다. 플래시를 사용하면 이 문제를 잘 해결할 수 있지만 이는 현명한 아이디어는 아닙니다. 이 제품은 결국 사라지거나 적어도 브라우저에서 더 이상 지원되지 않습니다. 따라서 이 솔루션에는 미래가 없습니다. jQuery 또는 순수 JavaScript를 사용하거나 완전히 직접 작성하는 것이 가능하지만 누군가 이미 솔루션을 만들었는데 왜 다시 개발해야 할까요? Clipboard.js를 살펴보겠습니다.

Clipboard.js는 Flash 구성 요소를 제거하고 이 문제를 우아하게 해결합니다. 스크립트를 도입하고 HTML 태그에 "data-clipboard-target" 속성을 할당하고 짧은 내용을 작성하기만 하면 됩니다. 단락 JavaScript 스니펫. 통화 변환 애플리케이션을 시연하기 위해 한 텍스트 상자에 값을 입력하면 변환 결과가 다른 텍스트 상자에 표시되고 텍스트 상자를 클릭하면 이벤트가 트리거되어 클립보드에 복사되고 메시지가 표시됩니다.

다음은 제가 구현한 것입니다.

이것이 텍스트 상자라고 가정해 보세요. (저는 MVC 프레임워크를 사용하여 애플리케이션을 만듭니다.)

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

AmountTo가 있고 AmountFrom이 입력이고 AmountFrom이 출력이라는 것을 알고 계셨나요? 마법은 "data-clipboard-target" 속성 내에서 발생합니다.

복사 작업 메시지를 표시하는 메시지 상자도 추가합니다

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

여러분이 관심을 두는 HTML 부분입니다. 이제 JavaScript/jQuery 부분으로 가보겠습니다

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard(&apos;#AmountTo&apos;);
clipboard.on(&apos;success&apos;,function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on(&apos;error&apos;,function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$(&apos;#AmountFrom&apos;).click(function(){$("#AmountFrom").val("");});
</script>

이 시점에서는 클립보드가 성공적으로 인스턴스화되면 일부 작업이 이벤트에 할당되고 그렇지 않으면 오류가 발생합니다. 이것은 모두 좋으며 아래와 같은 메시지를 표시하는 IE를 제외한 모든 최신 브라우저에서 작동합니다.

실제 작동하는 모습을 보려면 여기 JSFiddle 예제를 참조하세요.

다음 단계는 클립보드 데이터를 가져와서 클릭 시 자동으로 텍스트 상자에 붙여넣는 것입니다. 이때 보안 위험 때문에 브라우저가 이를 방지할 것으로 보이지만 찾아보거나 심지어 만들어 보겠습니다. 해결책이므로 모두가 계속해서 관심을 기울여야 합니다.