[JavaScript] contenteditable 붙여넣기 텍스트만 넣기

2023-09-14

---

사진: Unsplash 의 Ori Song

---

1. 방법

 

contenteditable 을 이용한 태그에 붙여넣기를 하면 일반 텍스트가 아닌 html 형태로 들어가게 되는데 이를 일반 텍스트가 들어갈 수 있게 변경하는 방법을 알아보자.

 

<span class="textarea" role="textbox" id="test" contenteditable></span>

<script>
  document.getElementById("test").addEventListener("paste", function (e) {
    e.preventDefault();
    var text = (e.originalEvent || e).clipboardData.getData("text/plain");
    this.innerHTML = text;
  });
</script>

 

위 코드는 해당 <span> 요소에 붙여 넣기 이벤트를 감지하고, 붙여 넣은 텍스트를 HTML 태그 없이 해당 요소에 삽입하며,
텍스트를 붙여 넣을 때 HTML 태그 속성을 포함하지 않도록 할 수 있다.

---

메인 이미지 출처 : 사진: Unsplash의Ori Song