복사 이벤트 후 클립 보드 내용 수정 : JavaScript, jQuery

Question

내 요구 사항 : 사용자가 웹 페이지에서 일부 내용을 복사하면 텍스트와 함께 일부 HTML 태그와 캐리지 리턴이 복사됩니다. 클립 보드에서 복사 된 콘텐츠를 수정해야합니다. 즉, 캐리지 리턴 및 HTML 태그를 제거해야합니다.

내가 지금까지 시도한 내용 : 나는 jQuery를 사용하여 복사본을 캡처하고 클립 보드의 내용을 가져 왔습니다. 아래 코드를 참조하십시오. 내가 window.clipboardData.setData(selectedText);를 사용하여 클립 보드 사항 setData에 시도 할 때

$(document).bind('copy', function() { 
     //getting clipboard content 
     var selectedText = window.getSelection().toString(); 

     //removing carriage retun from content 
     selectedText = selectedText.replace(/<\/?[^>]+(>|$)/g, ""); 

     //Trying to set data in clipboard 
     window.clipboardData.setData(selectedText); //Throws error 
} 

지금, 그것은 오류가 발생합니다.

질문 :

1) 나는 clipbard 내용을 수정하거나하지 않도록 올바른 기능 즉 setData()를 사용하고?

2) 누군가가 내게 어떻게 클립 보드의 내용을 수정할 수 있습니까?

Answer 1

생성 실행시에 textarea 내가 copyToClipboard 즉 내가 기능을 결합했다 copy 이벤트에 한 일이 문제를 해결하려면이 텍스트를 수정 클립 보드에 데이터를 복사 영역을 찾은 다음 '잘라 내기'명령을 실행하십시오 (복사 이벤트에 대한 재귀 호출을 피하기 위해). 마지막으로 finally 영역에서 textarea 요소를 삭제합니다.

코드 :

$(document).bind('copy', function() { 
      var text = window.getSelection().toString().replace(/[\n\r]+/g, ''); 
      copyToClipboard(text); 
     }); 

     function copyToClipboard(text) { 
       var textarea = document.createElement("textarea"); 
       textarea.textContent = text; 
       textarea.style.position = "fixed"; 
       document.body.appendChild(textarea); 
       textarea.select(); 
       try { 
        return document.execCommand("cut"); 
       } catch (ex) { 
        console.warn("Copy to clipboard failed.", ex); 
        return false; 
       } finally { 
        document.body.removeChild(textarea); 
       } 
     } 

Answer 2

알아낼 수있는 두 가지 사항이 있습니다.

1. 하여 clipboardData 객체는 window에 있지 통과 콜백 객체 e에있을 것입니다.
2. setData의 올바른 구문은 다음과 같습니다. 더 참고로

copy Event MDN

document.addEventListener('copy', function(e) { 
    console.log('copied'); 
    e.clipboardData.setData('text/plain', 'Hello World!'); 
    e.preventDefault(); 
}); 

Answer 3

바인딩 요소 복사 이벤트와 ID와 선택한 텍스트를 얻을. 텍스트를 바꾸거나 수정할 수 있습니다. 클립 보드를 가져 와서 새 텍스트를 설정하십시오. 정확한 형식을 얻으려면 형식을 "text/hmtl"로 설정해야합니다. 요소가 아닌 문서에 바인딩 할 수도 있습니다.

  $(ElementId).bind('copy', function(event) { 
      var selectedText = window.getSelection().toString(); 
      selectedText = selectedText.replace(/\u200B/g, ""); 

      clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData; 
      clipboardData.setData('text/html', selectedText); 

      event.preventDefault(); 
      });