To edit content directly inside a DIV, add contenteditable="true". It lets users change the content in place and keep formatted content visible while they edit. For text-only editing, use contenteditable="plaintext-only"; for a conventional multiline plain-text form field, use a <textarea>.
Make the DIV editable in place
Set the contenteditable global attribute on the element:
As an Amazon Associate I earn from qualifying purchases.
<div contenteditable="true" aria-label="Editable text">
Edit this text
</div>The browser makes the DIV editable, so users can place a caret, select text, and edit the content where it appears. With contenteditable="true", pasted formatting can be retained. This enables an editable region; it does not by itself create a complete rich-text editor with a toolbar or save behavior. See the MDN contenteditable reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose between rich text, plain text, and a textarea
| Approach | Best for | What to expect |
|---|---|---|
contenteditable="true" |
Editing content in place while formatted content remains visible | Browser editing; formatting in pasted content may be retained. |
contenteditable="plaintext-only" |
Editing text in place without pasted formatting | Text remains editable, and formatting is removed when content is pasted. |
<textarea> |
Plain text in a conventional multiline form control | Designed for text input, not rich-text formatting. See MDN’s textarea reference. |
| Show a textarea only while editing | A display view that switches to a familiar form field for edits | Use JavaScript to swap between the display DIV and textarea, then update the display on save. The textarea still edits plain text. |
Use an inline editable region when users need to see formatting as they work. Choose a textarea when the value is plain text and standard form-control behavior matters more than in-place formatting.
#1 Best Overall
Add a save action
Making a region editable does not save changes. Your application must decide what to collect and where to store it. For rendered text, read innerText:
<div id="editor" contenteditable="true" aria-label="Editable text">
Edit this text
</div>
<button id="save" type="button">Save</button>
<script>
const editor = document.querySelector("#editor");
document.querySelector("#save").addEventListener("click", () => {
const text = editor.innerText;
// Send or store text according to your application's requirements.
});
</script>If the application needs to preserve formatting, it must handle HTML markup rather than plain text. Treat edited HTML as untrusted: validate or sanitize it before storing or rendering it. Reading or assigning innerHTML is not a safe substitute for that work. See the MDN innerHTML reference.
Provide keyboard and accessible interaction
Give the editable area an accessible label or clear instructions, and make the focus indicator visible so users can tell when it is active. Editable elements can receive focus and take part in sequential keyboard navigation. Nested editable regions do not join that sequence by default; add tabindex="0" to a nested editable region if keyboard users need to reach it with Tab. Consult MDN’s contenteditable documentation for the attribute’s keyboard behavior.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →What contenteditable does not provide
The attribute makes the element editable, but application-specific behavior remains your responsibility. If users need bold or other formatting controls, create and connect a toolbar. You also need to decide how save and cancel work, how changes persist, and which formatting your application accepts. A textarea swap can provide a distinct edit state, but it is not a rich-text editing solution.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
