HTML을 통해 텍스트를 편집 가능하게 만드는 작고 간단한 요령

제 최근 트윗을 팔로우하셨다면 제가 현재 Wes Bos의 JavaScript30 challenge과 함께 코딩하고 있다는 것을 눈치채셨을 것입니다.

많은 도전 과제가 제 JavaScript 지식을 재충전하는 역할을 했지만 튜토리얼을 일시 중지하고 내부적으로 "와, 이걸 왜 더 일찍 배우지 않았지?!"라고 외쳤던 때가 있었습니다.

움직일 수 있는 텍스트 그림자를 만드는 문제에 접근할 때 다시 그 순간을 가졌습니다.

결과적으로 사용자가 브라우저에서 대상 텍스트를 편집할 수 있도록 하는 contenteditable이라는 HTML 전역 속성이 있습니다.

MDN documentation 에 따르면 contenteditable 은 열거된 속성입니다(부울 값과 달리 가능한 값 목록이 있음을 의미).

속성에 값이 지정되지 않은 경우 값은 빈 문자열로 처리되어 다음과 같이 텍스트를 편집할 수 있습니다.

<div>
  <h1 contenteditable>🔥WOAH!</h1>
</div>

마찬가지로 브라우저에 원하는 텍스트를 입력할 수 있습니다.

CSS도, JavaScript도, 입력 필드도 필요 없습니다. 평범한 작은 HTML 속성입니다. (보안 관련 정보는 this Stack Overflow discussion을 참조하십시오.)




직장이나 프로젝트에서 true을 사용한 적이 있습니까? 더 빨리 발견했으면 하는 다른 프런트 엔드 마법이 있습니까? 댓글로 경험을 공유해 주세요. 실제 사용 사례를 보고 싶습니다! 🙌