728x90
728x90
반응형
1. 개요
- 클립보드 API를 사용해서 자바스크립트로 간단하게 텍스트 복사하는 방법에 대해 소개하겠습니다.
- 예제 소스를 사용해서 여기 블로그에도 바로 테스트할 수 있도록 마지막에 구현해 놓도록 하겠습니다.
2. 주요 코드 설명
- navigator.clipboard.writeText() : 클립보드 API로 텍스트를 복사합니다. 최신 브라우저에서 지원됩니다.
- select()와 setSelectionRange() : input 요소의 내용을 선택하는 데 사용되며, 모바일 환경에서도 복사를 지원합니다.
- catch() 블록 : 복사 실패 시 오류를 처리할 수 있습니다.
3. 예제 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>복사하기 예제</title>
</head>
<body>
<input type="text" id="textToCopy" value="오늘도 행복하세요. (복사 테스트)" readonly>
<button id="copyButton">복사하기</button>
<script>
document.getElementById('copyButton').addEventListener('click', function() {
const textToCopy = document.getElementById('textToCopy');
// 텍스트 선택
textToCopy.select();
textToCopy.setSelectionRange(0, 99999); // 모바일 지원
// 클립보드에 복사
navigator.clipboard.writeText(textToCopy.value)
.then(() => {
alert('텍스트가 복사되었습니다!');
})
.catch(err => {
console.error('복사 실패:', err);
});
});
</script>
</body>
</html>
4. 예제 소스 실행 테스트
관련글
728x90
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) (75) | 2024.12.07 |
|---|---|
| [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 (124) | 2024.12.03 |
| [JavaScript] html 요소에 focus 주는 방법 (0) | 2024.11.28 |
| [JavaScript] 자바스크립트 팝업창 오픈 방법 (0) | 2024.11.28 |
| [JavaScript] 문자열 공백 제거 메서드 (trim()) (0) | 2024.11.26 |