728x90
아래의 코드를 사용하면 "텍스트"라는 글자를 클립보드에 복사할 수 있습니다.
navigator.clipboard.writeText("텍스트");
navigator.clipboard api를 사용해서 System clipboard 에 접근합니다.
System clipboard는 컴퓨터 Ram에 있는 Buffer입니다.
* 클립보드에 텍스트를 복사하려면 "clipboard-write" 권한이 필요합니다.
"clipboard-write" 의 권한은 활성 탭에 있을 때 페이지에 자동으로 부여됩니다.
포커싱을 잃으면 비활성화 탭이 되어 클립보드 복사에 실패합니다.
이 외에도 비활성화 탭이 되는 경우는 더 있습니다.
포커싱을 잃으면 비활성화 탭이 되어 클립보드 복사에 실패하는지 테스트를 해봤고,
아래는 테스트 코드와 영상입니다.
테스트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="copy()">클립보드 복사</button>
<script>
function copy(){
setTimeout(() => {
// 5초뒤 텍스트가 사라진다.
navigator.clipboard.writeText("복사함!!")
.then(alert("복사 성공"))
.catch(err =>{
alert("복사 실패 : "+err)
});
// 1초 지연됨
}, 1000);
// 클립보드에 복사됨.
}
</script>
</body>
</html>
테스트 영상 : 다른 탭에 이동하면 복사되지 않습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 입력한 내용을 텍스트 파일에 저장하기 (0) | 2023.04.07 |
|---|---|
| [javascript] mousemove 이벤트 사용하여 마우스 효과 주기. (0) | 2023.04.05 |
| [JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 (0) | 2023.04.02 |
| [JavaScript] 마우스 드래그로 일괄 선택하기 (0) | 2023.03.31 |
| [javascript] css 제어로 확장형 사이드 메뉴 만들기 (0) | 2023.03.23 |
