복사 할 때만 스타일을 재설정 할 수 있습니까?

Question

웹 사이트에서 몇 가지 버그를 수정하라는 요청을 받았으며 그 중 하나가 반복적으로 나를 던지고 있습니다. 이 특정 사이트의 스타일 레이아웃으로 인해 사용자가 지정된 영역에서 텍스트를 선택하고 복사하면 서식있는 텍스트 데이터를 복사하여 서식있는 텍스트 편집기에 붙여 넣으면 검정색 배경에 큰 검정 텍스트가 나타납니다.

이상적으로 모든 스타일 데이터를 제거하거나 특정 데이터 세트에서 일반 텍스트 복사를 사용하고 싶습니다.

이것이 가능합니까? 또는 what GitHub uses for Git URLs과 같은 플래시 애플릿과 같은 도구를 사용해야합니까?

Answer 1

몇백 년 전에 비디오 게임에서 메뉴의 모양을 그대로 재현 한 사용자 지정 양식을 만들었습니다. 당시 파이어 폭스는 많은 폼 UI 위젯 (Firefox 2.something?)을 CSS로 스타일 화하는 것을 허용하지 않았습니다. 지난 몇 년 동안 분명히 바뀌 었습니다.

이 문제를 해결하기 위해 수행 한 작업은 value = ""속성을 통해 전달 된 내용으로 매우 큰 입력 텍스트 상자를 만드는 것이 었습니다. (< 입력 유형 = "텍스트", 아니 < 텍스트 영역) 입력 상자 및 해당 내용의 스타일을 지정할 수 있지만이 정보는 텍스트 자체를 복사 할 때 유지되지 않습니다. 그래서 나는 문제를 완전히 밟았고, 수정본은 생방송입니다!

너무 간단했고 절대적으로 JS가 필요하지 않았습니다.

Answer 2

JavaScript를 사용하여 문제를 해결하는 데 만족하면 restyl하려는 요소에서 "oncopy"이벤트 (@FirstZero 신용)를 캡처 한 다음 JavaScript를 사용하여 요소를 다시 스타일을 적용하고 다시 스타일을 지정할 수 있습니다 시간 초과 후.

당신은 다음과 같은 자바 스크립트를 사용할 수 jQuery를 사용하여 좋아하는 경우 :

$('p').bind(
    'copy', 
    function(e) { 
     var copyElem= $(e.target); 
     var defaultColor = copyElem.css('color'); 
     copyElem.css('color', 'pink'); // Change the color to pink for copy 
     window.setTimeout(
      function() {copyElem.css('color', defaultColor);}, // Change it back 
      1 
     ); 
    } 
); 

(Try it out in jsFiddle)이이 onaftercopy 이벤트가 존재한다면 깔끔한 수 있지만, 불행하게도이 아무튼 것이라고

가

주 있는 것처럼 보입니다.

위의 해결 방법은 Chrome에서만 테스트했지만 Firefox (3.0 이상), Chrome 및 Safari의 최신 버전, Internet Explorer에서 작동합니다. 아마도 이 아니고 Opera에서이 작동하지 않을 것입니다.