Javascript 클립보드 복사

javascript 에 내장되어있는 기본 함수를 사용해서 화면의 값을 클립보드로 복사할 수 있다.

클립보드 복사는  writeText  함수를 사용하는것이 권장되나, 해당 함수는 https, localhost 에서만 동작한다. 개발서버 등 http 포트를 사용하는 경우 구버전인  execCommand 를 사용해줘야 한다.

테스트 할때 textarea element 를 하나 숨겨두고 값을 사용하려고 하였으나 제대로 동작하지 않았다. 원인을모르겠음 하여 구글링한 소스로 사용함.

 

$(".btn-copy").bind('click', function() {
  var targetItem = $(this).siblings('.item-copy')
  , targetVal = targetItem.val();

  // 숫자만복사할 아이템 체크
  if(targetItem.hasClass('number')){
    targetVal = targetVal.replace(/[^0-9]/g, '');
  }
  
  if(isEmpty(targetVal)){
    alert('값이 없습니다.');
    
  }else{
    if( location.hostname == 'localhost' || location.protocol.indexOf('https') != -1 ){
      navigator.clipboard.writeText(targetVal).then(function(){
        alert('복사되었습니다.');
      });
      
    }else{
      var $temp = $("<textarea>");
      $("body").append($temp);
      $temp.val(targetVal).select();
      document.execCommand("copy", false, $temp.val());
      $temp.remove();
      alert('복사되었습니다.');
    }
    
  }

});