clipboard.js / 클립보드에 복사하게 해주는 스크립트
clipboard.js
clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다.
- 홈페이지 : https://clipboardjs.com/
- GitHub : https://github.com/zenorocha/clipboard.js/
사용하기
clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다.
기본 문법
다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다.
var clipboard = new ClipboardJS( '.btn' ); // 클래스의 값이 btn인 요소를 복사
clipboard.on( 'success', function() { // 복사에 성공했을 때
// do something
} );
clipboard.on( 'error', function() { // 복사에 실패했을 때
// do something
} );
예제
Click을 클릭하면 Lorem Ipsum Dolor가 복사됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<p class="btn" data-clipboard-text="Lorem Ipsum Dolor">Click</p>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS( '.btn' );
clipboard.on( 'success', function() {
alert( 'Success' );
} );
clipboard.on( 'error', function() {
alert( 'Fail' );
} );
</script>
</body>
</html>
다양한 예제는 다운로드한 파일의 demo 폴더에 있습니다.
Related Posts
PHP / 함수 / phpversion() / PHP 버전 출력하는 함수
개요 phpversion으로 PHP의 버전을 확인할 수 있습니다. PHP 4 이상에서 사용할 수 있습니다. 문법 phpversion() PHP의 버전을 문자열로 반환합니다. 예제 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>phpversion</title> </head> <body> <?php echo '<p>PHP current version is ' . phpversion() . '</p>'; ...
Python / str() / 자료형을 문자열로 변환하는 함수
str()은 데이터 타입을 문자열로 변환하는 함수이다. >>> a = 1 >>> type( a ) <class 'int'> >>> print( a ) 1 >>> b = str( a ) >>> type( b ) <class 'str'> >>> print( b ) 1 >>> a = 1.23 >>> type( a ) <class 'float'> >>> print( a ) 1.23 >>> b = str( a ) >>> type( b ) <class 'str'> >>> print( b ) 1.23 Python ...
PHP / SQL Server / Ubuntu 18.04에서 연결하는 방법
PHP에서 SQL Server에 연결하는 방법입니다. 서버 OS는 Ubuntu 18.04이고 Apache, PHP는 설치되어 있는 상태에서 시작합니다. 아래의 내용은 꼭 필요한 것만 모은 요약이며, 자세한 내용은 Microsoft 홈페이지에서 보실 수 있습니다. 소프트웨어 설치 다음의 명령을 차례대로 실행하여 필요한 소프트웨어를 설치합니다. curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - curl https://packages.microsoft.com/config/ubuntu/18.04/prod.list > /etc/apt/sources.list.d/mssql-release.list apt-get update ACCEPT_EULA=Y apt-get install msodbcsql17 apt-get install unixodbc-dev apt install ...
Python / input() / 사용자가 입력한 값을 변수에 저장하는 함수
input() 함수로 사용자가 어떤 값을 입력하게 하고, 그 값을 변수에 저장할 수 있습니다. 문법 예를 들어 다음을 입력하고 엔터를 누르면 사용자가 값을 입력하기를 기다립니다. >>> x = input() 값을 입력하고 엔터를 누르면 그 값이 변수 x에 저장됩니다. >>> x = input() hello >>> x 'hello' 입력할 값에 대한 안내를 출력하고 싶다면 다음과 같이 합니다. >>> x = input('some text') 작은 따옴표 ...
PHP / 회원 관리 / 세션(SESSION) 추가하기, 로그아웃 페이지
login.php 로그인 한 상태인지 로그인 하지 않은 상태인지 파악하기 위해 login-ok.php로 넘어가기 전에 세션을 시작합니다. 그리고 username을 $_SESSION에 담습니다. <?php $username = $_POST; $password = $_POST; if ( !is_null( $username ) ) { $jb_conn = mysqli_connect( 'localhost', 'codingfactory', '1234qwer', 'codingfactory.net_example' ...
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드
.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...
CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성
개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성이다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킨다. bottom : 표의 아래에 캡션을 위치시킨다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 <!doctype html> <html lang="ko"> <head> ...
문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...
JavaScript / Object / Array.length / 배열의 길이 반환하는 속성
.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...