웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.
그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다. 오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.
# contentEditable 붙여넣기시 텍스트만 추가하기
텍스트만 추가하기 위해서는 paste 이벤트를 추가하고 이벤트객체의 clipboardData 프로퍼티가 필요합니다. 그럼 간단한 예제를 만들어보겠습니다. 먼저 contentEditable 태그를 추가합니다.
<div id="contactForm" contentEditable="true">
</div>
</div>
이제 위 태그에 붙여넣기를 시도할 경우 이벤트를 호출하도록 합니다. 또한 기본 이벤트를 제거하기 위해 preventDefalut() 역시 필요합니다.
var ele = document.querySelector('#contactForm');
ele.addEventListener('paste', function(event) {
event.preventDefault();
...
}
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');
...
}
event.preventDefault();
// 클립보드에서 복사된 텍스트 얻기
var pastedData = event.clipboardData || window.clipboardData;
var textData = pastedData.getData('Text');
...
}
마지막으로 저장된 변수 textData를 붙여넣도록 합니다.
// 위에서 부터 계속...
window.document.execCommand('insertHTML', false, textData);
});
}
window.document.execCommand('insertHTML', false, textData);
});
}
이제 모든 과정이 끝나고 텍스트만 추가되게 됩니다.
! 띄어쓰기를 br로 바꾸기
만약 텍스트 데이터의 띄어쓰기를 br 태그로 바꾸길 원하는 경우에 아래처럼 정규표현식을 사용해 바꾸어 적용할 수 있으니 참고하세요.
textData = textData.replace(/\r\n/gi, '<br>');
여기까지 contentEditable 태그에 붙여넣기를 일반 텍스트로 추가해보았습니다.
아래의 글도 찾고 계시지 않나요?
