HTML 요소를 편집할 수 있다는 사실을 알고 계셨습니까?

이것은 자주 볼 수 없는 HTML 옵션 중 하나이지만 실제로는 정말 멋집니다.
HTML라는 contenteditable 속성이 있으며 HTML 요소를 편집 가능하게 합니다🙊.

이 Codepen에서 어떻게 보이는지 보여드리겠습니다.
(텍스트를 클릭하세요!)

HTML 콘텐츠편집 가능

contenteditable 태그를 추가하여 간단히 요소를 편집 가능하게 만들 수 있습니다.

<div class="container">
  <h1 contenteditable="true">Welcome click me 🎯</h1>
  <p contenteditable="true">
    Did you know you can click me to edit my content?<br />
    Even big paragraphs 👀
  </p>
  <a contenteditable="true" href="#">View the full article</a>
</div>

세 가지 값을 가질 수 있습니다.

contenteditable="true" ~ 콘텐츠를 변경할 수 있습니다

contenteditable="false" ~ 변경할 수 없음

contenteditable="inherit" ~ 부모가 가진 모든 것

JavaScript에서 변경 사항 캡처

물론 이것은 멋지지만 자체적으로 많은 작업을 수행하지는 않습니다. 실제로 JavaScript 를 사용하여 이러한 변경 사항을 캡처할 수 있습니다.

각contenteditable 태그에 대한 입력 이벤트에 이벤트 리스너를 바인딩해 보겠습니다.

var contents = document.querySelectorAll('[contenteditable]');

for (let content of contents) {
  content.addEventListener('input', function() {
    console.log('input changed to: ' + content.innerHTML);
  });
}

브라우저 지원

이것은 기본HTML 태그이므로 놀라운 지원을 제공합니다!

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나