Contenteditable

HTML5 Attribute

contenteditable

• HTML5에서 사용 가능한 내용 편집이 가능한 요소
• contenteditable 속성 값이 true이면 자식 요소들도 true값을 가짐

<div id="edit" contenteditable="true">...</div>
또는
<div id="edit" contenteditable>...</div>

예제

텍스트를 추가하면 추가한 만큼의 길이가 다른 색으로 변하는 예제이다.

<div>
 <span contenteditable>This is text</span>
</div>

body {
/* flex-layout을 이용한 가운데 정렬 */
 display: flex;
 align-items: center;
 justify-content: center;
}

div {
 border-bottom: 4px  solid  black;
 width: 300px;
}

span {
 position: relative;
 bottom: -4px;
 display: inline-block;
 border-bottom: 4px  solid  pink;
 outline: 0;
}

Reference

https://www.w3schools.com/tags/att_global_contenteditable.asp