반응형
아래 소스코드는 입력된 텍스트에 대해서 복사하기 버튼을 클릭하여 텍스트를 클립보드에 복사할 수 있으며, 복사 작업의 성공/실패 메시지를 표시하고 있습니다. 간단한 예제이니 응용해서 사용하시면 됩니다.
소스코드
ㅇ navigator.clipboard.writeText(text)
- 브라우저에서 제공하는 Clipboard API이며, 클립보드에 텍스트를 쓸 수 있습니다. 복사 및 붙여넣기 작업을 수행할 때 유용하게 사용됩니다.
- text : 클립보드에 복사하려는 텍스트를 나타냅니다.
- 클립보드에 텍스트를 성공적으로 복사한 경우 then() 메서드를 사용하여 처리할 수 있고, 실패한 경우 catch() 메서드를 사용하여 오류를 처리할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<style>
.success { color: green; }
.error { color: red; }
</style>
<h3>1. 복사하기 버튼을 클릭하세요.</h3>
<h3>2. Ctrl+V 로 붙여넣기를 해서 확인해 보세요.</h3>
<input type="text" id="myInput">
<button onclick="copyText()">복사하기</button>
<div id="copyStatus"></div>
<script>
function copyText() {
var inputElement = document.getElementById("myInput");
var textToCopy = inputElement.value;
var copyStatusElement = document.getElementById("copyStatus");
if (textToCopy) {
navigator.clipboard.writeText(textToCopy)
.then(function() {
alert("복사한 문자열 : " + textToCopy);
copyStatusElement.textContent = "복사 성공";
copyStatusElement.className = "success";
inputElement.focus(); // 입력란에 포커스를 다시 주기
})
.catch(function(error) {
copyStatusElement.textContent = "복사 실패";
copyStatusElement.className = "error";
console.error("복사 실패: ", error);
});
} else {
alert("복사할 문자열을 입력하세요.");
inputElement.focus();
}
}
</script>
</body>
</html>
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Infinity&NaN 해결하기, 체크, 예외처리, 발생원인 (0) | 2023.09.25 |
|---|---|
| [자바스크립트] 우클릭 방지 이벤트 등록, 해제하기 (사용법, 예제) (0) | 2023.09.21 |
| [자바스크립트] userAgent 사용해서 브라우저, 디바이스 정보 확인하기 (버전, PC, 모바일, OS, IOS) (0) | 2023.09.18 |
| [자바스크립트] anime js 사용해서 애니메이션 주기 (사용법, 예제) (0) | 2023.09.14 |
| [자바스크립트] TypeIt 사용해서 타이핑 애니메이션 효과 내기 (사용법, 예제, 콜백) (0) | 2023.09.14 |
댓글