폼 입력 내용을 클립보드로 복사하거나 클립보드에서 가져와 붙여넣기

자바스크립트 코드를 이용해 클립보드와 상호작용을 통해 텍스트 데이터를 복사하거나 가져올 수 있습니다.

웹브라우저는 navigator.clipboard 객체를 통해 운영체제의 클립보드와 상호 작용을 할 수 있도록 기반 기능을 제공합니다.

보안상의 이유로 자바스크립트가 클립보드에 접근할 때는 다음과 같은 접근 권한을 확인할 수도 있습니다.

입력 필드에 입력한 텍스트 내용을 클립보드로 복사하거나 가져오는 간단한 버튼을 다음처럼 만들어서 구현합니다.

<form name="myform">
  <input type="text" name="userid" id="userid" value="">
  <textarea name="comment" id="comment"></textarea>
  <input type="button" id="copybtn" name="copybtn" value="클립보드로 복사">
  <input type="button" id="pastebtn" name="pastebtn" value="클립보드에서 가져오기">
</form>

클립보드로 입력 필드 텍스트 복사하기

먼저 클립보드 복사를 하는 버튼에 클릭 이벤트를 등록합니다.

window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#copybtn').addEventListener('click', function(event) {
  //클립보드로 복사하는 코드 등록
  });
});

클립보드로 복사하는 기능은 

navigator.clipboard 객체의 writeText(문자열); 메서드를 사용합니다.

const copyTextarea = document.querySelector('#'+fieldId);

try {
  navigator.clipboard.writeText(copyTextarea.value);//클립보드로 복사
  console.log('복사된 텍스트 내용: ' + copyTextarea.value);
} catch (err) {
  console.log('복사할 수 없음!');
}

클립보드로 복사한 내용이 있는 입력 필드의 텍스트 내용을 선택해서 클립보드로 복사되었다는 것을 알려주는 조금 더 세련된 방법을 추가할 수도 있습니다.

const copyTextarea = document.querySelector('#'+fieldId);
copyTextarea.focus();
copyTextarea.select();

try {
  navigator.clipboard.writeText(copyTextarea.value);
  console.log('복사된 텍스트 내용: ' + copyTextarea.value);
} catch (err) {
  console.log('복사할 수 없음!');
}

클립보드의 텍스트 데이터를 가져오기

클립보드의 내용을 입력 필드에 붙여 넣는 방법은 조금 더 복잡합니다.

클립보드로 복사하는 메서드는 메서드 인자로 복사할 문자열 내용을 넘기면 바로 실행되지만, 클립보드의 내용을 가져오는 readText() 메서드는 리턴 값으로 프로미스 객체를 반환합니다.

따라서 다음과 같이 메서드를 사용하면 클립보드의 텍스트 문자열 대신 프로미스 객체가 반환되고 입력 필드에는 문자열 대신 객체 이름만 표시됩니다.

pasteTextarea.value = navigator.clipboard.readText();

클립보드에서 데이터를 가져오는 방식은 비동기 방식을 사용합니다.

클립보드에 어떤 종류의 데이터가 들어있는지, 얼마나 긴 데이터가 들어있는지 알 수가 없기 때문에 웹 브라우저는 클립보드의 데이터를 가져오는 시간 동안 자바스크립트 실행으로 인해 웹 페이지의 다른 동작이 대기 상태에 빠져있게 되는 것을 피하기 위해 비동기로 클립보드의 데이터를 가져오는 방식을 사용합니다.

그래서 readText() 메서드는 비동기로 처리하는 프로미스 객체를 반환하고, 프로미스 객체의 then() 메서드로 클립보드에서 가져온 데이터를 처리하도록 합니다.

클립보드에서 텍스트 데이터를 가져와 입력 필드에 붙이는 과정은 다음과 같이 처리합니다.

프로미스 객체의 then() 메서드 인자(clipboardText)로 클립보드에서 가져온 데이터를 받아서 메서드 안에서 데이터를 입력 필드에 붙여넣는 작업을 진행하면 됩니다.

  const pasteTextarea = document.querySelector('#'+fieldId);

  try {
    navigator.clipboard.readText().then(clipboardText => { //프로미스 객체로 비동기 처리
      pasteTextarea.value = clipboardText;
      console.log('클립보드에서 가져온 내용: ' + pasteTextarea.value);
    });
  } catch (err) {
    console.log('클립보드에서 가져올 수 없음!'+err);
  }

클립보드와 텍스트 데이터를 주고 받는 완성된 자바스크립트 함수 코드는 다음과 같습니다.

//클립보드로 복사
function copyToClipboard(fieldId){
  const copyTextarea = document.querySelector('#'+fieldId);
  copyTextarea.focus();
  copyTextarea.select();

  try {
    navigator.clipboard.writeText(copyTextarea.value);
    console.log('복사된 텍스트 내용: ' + copyTextarea.value);
  } catch (err) {
    console.log('복사할 수 없음!');
  }

  window.getSelection().removeAllRanges();
}

//클립보드에서 가져오기
function pasteFromClipboard(fieldId){
  const pasteTextarea = document.querySelector('#'+fieldId);
  pasteTextarea.focus();

  try {
    //프로미스 객체를 통해 클립보드에서 가져온 데이터를 입력 필드에 적용
    navigator.clipboard.readText().then(clipboardText => {
      pasteTextarea.value = clipboardText;
      pasteTextarea.select();
      console.log('클립보드에서 가져온 내용: ' + pasteTextarea.value);
    });
  } catch (err) {
    console.log('클립보드에서 가져올 수 없음!'+err);
  }
}