Flash_jquery 없이 jQuery를 사용하여 텍스트를 클립보드에 복사-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:03:45

원래의

1315명이 탐색했습니다.

인터넷에서 특정 텍스트를 클립보드에 복사하는 방법에 대한 해결책을 찾으면 플래시를 사용하는 것이 가장 가능성이 높습니다. 플래시를 사용하면 이 문제를 잘 해결할 수 있지만 이는 현명한 아이디어는 아닙니다. 이 제품은 결국 사라지거나 적어도 브라우저에서 더 이상 지원되지 않습니다. 따라서 이 솔루션에는 미래가 없습니다. 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를 제외한 모든 최신 브라우저에서 작동합니다.