웹 페이지에 복사 버튼을 배치하는데, 이는 주로 사용자가 링크와 같은 복잡한 텍스트를 쉽게 복사할 수 있도록 하기 위해 사용됩니다. 과거에는 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>
자바스크립트
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
