HTML의 contenteditable 속성은 사용자가 웹 페이지의 요소를 직접 편집할 수 있도록 해주는 속성입니다.
아래 예제코드는 contenteditable 속성을 사용하여 div 내용을 편집하고 이벤트 처리를 통해 변경된 텍스트를 출력하고 있습니다.
1. 사용법
<div contenteditable="true">
여기에 내용을 직접 입력하세요.
</div>
위의 코드에서 <div> 요소에 contenteditable 속성을 추가하면 해당 요소가 편집 가능한 상태가 됩니다. 사용자는 해당 요소를 클릭하여 내용을 수정할 수 있습니다.
블로그 게시물, 웹 문서, 댓글 등 다양한 웹 콘텐츠를 편집할 때 유용하게 사용될 수 있습니다. 에디터와 비슷한 환경에서 웹 페이지의 내용을 편집할 수 있어서 작성 및 편집 과정이 보다 편리해집니다.
2. 예제
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 스타일링은 선택사항입니다. */
.editable {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="editable" contenteditable="true" id="editableDiv">
이 부분을 클릭하고 텍스트를 편집해보세요.
</div>
<p>이 부분은 편집이 불가능합니다.</p>
<script>
const editableDiv = document.getElementById('editableDiv');
// 텍스트가 변경될 때마다 발생하는 이벤트 리스너 추가
editableDiv.addEventListener('input', function() {
// 변경된 텍스트 가져오기
const editedText = this.innerText;
console.log('편집된 내용:', editedText);
});
// 포커스를 잃었을 때 발생하는 이벤트 리스너 추가
editableDiv.addEventListener('blur', function() {
console.log('포커스를 잃었습니다.');
});
</script>
</body>
</html>
contenteditable 속성을 사용해서 발생하는 이벤트를 처리하고 있습니다. 해당 요소의 텍스트가 변경되거나 포커스가 변경될 때 콘솔에 출력하고 있습니다.
1) editableDiv.addEventListener('input', function() { ... });
-editableDiv 요소에 input 이벤트 리스너를 추가합니다. input 이벤트는 요소의 값이 변경될 때 발생합니다. 사용자가 텍스트를 입력하거나 수정할 때마다 이 리스너가 실행됩니다.
2) editableDiv.addEventListener('blur', function() { ... });
-editableDiv 요소에 blur 이벤트 리스너를 추가합니다. blur 이벤트는 요소가 포커스를 잃었을 때 발생합니다.
'개발이야기 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] CSS 우선 순위 변경하기 (!important) 사용법, 예제 (0) | 2023.10.13 |
|---|---|
| [HTML&CSS] :not(), :has() 가상 클래스 선택자 사용하기 (예제, 설명) (0) | 2023.10.05 |
| [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 (0) | 2023.09.25 |
| [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) (0) | 2023.09.08 |
| [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 (0) | 2023.09.08 |
댓글