JavaScript

[JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법

teamnova 2023. 4. 3. 12:00
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>

 

테스트 영상 : 다른 탭에 이동하면 복사되지 않습니다.