<p> 요소의 콘텐츠를 편집 가능하도록 설정합니다.
<body> <p id="myP">This is a paragraph. Click the button to make me editable.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <!-- 버튼 클릭 시 The p element above is now editable. Try to change its text. 표시됨 --> <!-- 이후 <p id="myP">에서 콘텐츠를 수정할 수 있음 --> <script> function myFunction() { document.getElementById('myP').contentEditable = true; document.getElementById('demo').innerHTML = 'The p element above is now editable. Try to change its text.'; } </script> </body>
contentEditable 속성은 요소 콘텐츠의 편집 가능 여부를 설정하거나 반환합니다.
Tip: isContentEditable 속성을 사용하여 요소 콘텐츠의 편집 가능 여부를 확인할 수도 있습니다.
contentEditable 속성을 반환합니다.
HTMLElementObject.contentEditable
contentEditable속성을 설정합니다.
HTMLElementObject.contentEditable = true|false
| Value | Description |
|---|---|
| true or false | 요소 콘텐츠의 편집 가능 여부를 지정합니다. |
| 가능한 값들: | |
| “inherit” - 기본 설정. 부모 요소가 편집 가능할 경우 해당 요소의 콘텐츠는 편집 가능합니다. | |
| “true” - 콘텐츠는 편집 가능합니다. | |
| “false” - 콘텐츠는 편집할 수 없습니다. |
| Return Value | 문자열, 요소가 편집 가능할 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다. |
<p> 요소의 편집 가능 여부를 확인합니다.
<body> <p id="myP" contenteditable="true">Click the button to find out if I am editable.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <!-- 버튼 클릭 시 true = The p element is editable. To see the effect, try to change its text.가 표시되고, <p id="myP">의 콘텐츠를 수정할 수 있음 --> <script> function myFunction() { var x = document.getElementById('myP').contentEditable; document.getElementById('demo').innerHTML = x + ' = The p element is editable. To see the effect, try to change its text.'; } </script> </body>
<p> 요소의 콘텐츠를 편집하는 기능을 토글합니다.
<body> <p id="myP" contenteditable="true">Try to change this text.</p> <button onclick="myFunction(this)">Disable content of p to be editable!</button> <p id="demo"></p> <script> function myFunction(button) { var x = document.getElementById('myP'); if (x.contentEditable == 'true') { x.contentEditable = 'false'; button.innerHTML = 'Enable content of p to be editable!'; } else { x.contentEditable = 'true'; button.innerHTML = 'Disable content of p to be editable!'; } } /* 1. 페이지 로딩 시 버튼에는 Disable content of p to be editable!라고 표시되어 있음 2. 편집 가능한 상태이므로, id="myP"의 콘텐츠를 수정할 수 있다. 3. 버튼 클릭 시, Enable content of p to be editable!로 변경되며, 콘텐츠를 수정할 수 없음 */ </script> </body>