Clipboard.js는 Flash가 필요하지 않으며 텍스트 복사 및 Cutting_javascript 기술을 실현하기 위해 JS 라이브러리에 의존하지 않습니다.

웹 페이지에 복사 버튼을 배치하는데, 이는 주로 사용자가 링크와 같은 복잡한 텍스트를 쉽게 복사할 수 있도록 하기 위해 사용됩니다. 과거에는 JS를 통해 Flash에 의존하거나 심지어 jQuery의 거대한 js 라이브러리에 의존하기도 했습니다. 텍스트를 클립보드에 복사합니다. 오늘 소개해드리고 싶은 플러그인은 플래시가 필요하지 않고 다른 js 라이브러리에 의존하지 않는 매우 현대적인 플러그인입니다.

작업 렌더링:

HTML
먼저 로컬 clipsboard.js 파일을 로드하세요.

<script src="clipboard.min.js"></script> 

그런 다음 복사하거나 잘라낼 텍스트 필드 내용과 버튼을 본문에 추가합니다.

<input id="foo" value="http://www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button> 

여기에서는 HTML5의 data-속성을 사용하여 복사 개체 대상을 찾습니다. 이는 #foo의 값 내용이 복사되었음을 나타내는 텍스트 필드 #foo를 가리킵니다. aria-label 속성은 성공 후 복사를 정의합니다. 복사. 정보, 복사 결과 정보를 표시하는 데 사용됩니다.
현재 작업이 복사인지 잘라내기인지 정의하는 data-clipboard-action 속성도 있습니다. data-clipboard-action="cut"일 때 버튼을 클릭하면 WORD와 마찬가지로 텍스트가 잘립니다. 작업. . 물론 잘라내기 작업은 텍스트와 텍스트 영역에서만 작동합니다.
또한 복사 객체로 input, textarea 등의 요소의 내용이 필요하지 않습니다. ata-clipboard-text 속성을 통해 버튼을 클릭하면 ata-에 해당하는 내용으로 복사되도록 정의할 수 있습니다. 클립보드 텍스트.

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button> 

자바스크립트
36cc49f0c466276486e50c850b7e4956 앞의 3f1c4e4b6b16bbbd69b2ee476dc4f83a에 다음 코드를 추가하고 저장한 후 열어서 찾아보고 버튼을 클릭하여 복사하세요.

new Clipboard('.btn'); 

물론 추가로 처리할 수도 있습니다. 예를 들어 복사가 완료되면 다음 코드를 실행하면 됩니다.

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 

위 내용은 플래시가 필요하지 않거나 다른 js 라이브러리에 의존하지 않는 텍스트 복사 및 잘라내기 과정입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.