Contenteditable 속성 사용
웹 사이트의 텍스트를 사용자가 편집 할 수 있도록하는 것이 예상보다 쉽습니다. HTML은이 목적을 위해 contenteditable 속성을 제공합니다.
contenteditable 속성은 HTML5 의 출시와 함께 2014 년에 처음 소개되었습니다. 브라우저가 관리하는 내용을 사이트 방문자가 브라우저에서 변경할 수 있는지 여부를 지정합니다.
Contenteditable 속성 지원
대부분의 최신 데스크톱 브라우저는이 특성을 지원합니다.
여기에는 다음이 포함됩니다.
- Chrome 4.0 이상
- Internet Explorer 6 이상
- Firefox 3.5 이상
- Safari 3.1 이상
- Opera 10.1 이상
- Microsoft Edge
대부분의 모바일 브라우저에서도 마찬가지입니다.
Contenteditable 사용 방법
편집 가능한 HTML 요소에 속성을 추가하기 만하면됩니다. 가능한 값은 true, false 및 inherit입니다. Inherit는 기본값이며, 요소가 상위 값을 가짐을 의미합니다. 마찬가지로 새로 편집 할 수있는 콘텐츠의 하위 요소는 값을 false로 변경하지 않는 한 편집 할 수 있습니다. 예를 들어, DIV 요소를 편집 가능하게 만들려면 다음을 사용하십시오.
Contenteditable로 편집 가능한 할 일 목록 만들기
편집 가능한 컨텐트는 로컬 스토리지와 페어링 할 때 가장 적합하므로 세션과 사이트 방문 사이에 컨텐트가 유지됩니다.
- HTML 편집기에서 페이지를 엽니 다.
- myTasks 라는 글 머리표가없는 순서가 지정되지 않은 목록을 만듭니다 .
- 일부 작업 li>
- 다른 작업 li>
ul>
- 일부 작업 li>
- contenteditable 속성을
- 요소에 추가합니다.
- 문서의 에 jQuery에 대한 링크를 추가하십시오.