Flash나 JS 라이브러리에 의존하지 않고 텍스트 복사 및 자르기를 수행합니다. 소스 코드 다운로드 include

렌더링은 다음과 같습니다.

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

데모 보기 소스 코드 다운로드

HTML

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

코드 복사 코드는 다음과 같습니다.

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

코드 복사 코드는 다음과 같습니다.

여기에서는 HTML5의 data-속성을 사용하여 복사 개체 대상을 찾습니다. 이는 #foo의 값 내용이 복사되었음을 나타내는 텍스트 필드 #foo를 가리킵니다. aria-label 속성은 성공 후 복사를 정의합니다. 복사. 정보, 복사 결과 정보를 표시하는 데 사용됩니다.

현재 작업이 복사인지 잘라내기인지 정의하는 data-clipboard-action 속성도 있습니다. data-clipboard-action="cut"일 때 버튼을 클릭하면 텍스트가 잘립니다. 그 다음에는 WORD가 동일하게 작동합니다. 물론 잘라내기 작업은 텍스트와 텍스트 영역에서만 작동합니다.

복사 객체로 input, textarea 등의 요소 콘텐츠도 필요하지 않습니다. ata-clipboard-text 속성을 통해 버튼을 클릭하면 콘텐츠에 복사할 콘텐츠를 정의할 수 있습니다. ata-clipboard-text 에 해당합니다.

코드 복사 코드는 다음과 같습니다.

자바스크립트

앞의

Flash나 JS 라이브러리에 의존하지 않고 텍스트 복사 및 자르기를 수행합니다. 소스 코드 다운로드 include_javascript 기술.