입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.

그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다.  오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.



# contentEditable 붙여넣기시 텍스트만 추가하기
텍스트만 추가하기 위해서는 paste 이벤트를 추가하고 이벤트객체의 clipboardData 프로퍼티가 필요합니다. 그럼 간단한 예제를 만들어보겠습니다. 먼저 contentEditable 태그를 추가합니다.
<div id="contactForm" contentEditable="true">
</div>

이제 위 태그에 붙여넣기를 시도할 경우 이벤트를 호출하도록 합니다. 또한 기본 이벤트를 제거하기 위해 preventDefalut() 역시 필요합니다.
var ele = document.querySelector('#contactForm');

ele.addEventListener('paste', function(event) {
  event.preventDefault();
  ...
}

기본 이벤트를 제거하였으니 이제 복사된 텍스트 값을 이벤트 객체에서 얻어 텍스트로 변환해야겠죠.
var ele = document.querySelector('#contactForm'); ele.addEventListener('paste', function(event) {
  event.preventDefault();

  // 클립보드에서 복사된 텍스트 얻기
  var pastedData = event.clipboardData ||  window.clipboardData;
  var textData = pastedData.getData('Text');
  ...
}

마지막으로 저장된 변수 textData를 붙여넣도록 합니다.
  // 위에서 부터 계속...
  window.document.execCommand('insertHTML', false,  textData);
  });
}

이제 모든 과정이 끝나고 텍스트만 추가되게 됩니다.


! 띄어쓰기를 br로 바꾸기
만약 텍스트 데이터의 띄어쓰기를 br 태그로 바꾸길 원하는 경우에 아래처럼 정규표현식을 사용해 바꾸어 적용할 수 있으니 참고하세요.
textData = textData.replace(/\r\n/gi, '<br>'); 

여기까지 contentEditable 태그에 붙여넣기를 일반 텍스트로 추가해보았습니다.