Syntax
<div contenteditable="true" role="textbox" aria-multiline="true"></div>Examples
Editable Content with contenteditable: working example
Save as an HTML file and open it in a browser. Expected result: Editing the note and clicking Preview text displays its current plain-text representation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
<style>
#note { border: 1px solid; min-height: 4rem; padding: 1rem; }
</style>
</head>
<body>
<p id="editor-label">Draft note</p>
<div id="note" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="editor-label">Write a note.</div>
<button id="preview" type="button">Preview text</button>
<pre id="result"></pre>
<script>
document.querySelector("#preview").addEventListener("click", () => {
document.querySelector("#result").textContent = document.querySelector("#note").innerText;
});
</script>
</body>
</html>- Expected result: Editing the note and clicking Preview text displays its current plain-text representation.
- The accessible name comes from aria-labelledby rather than placeholder text.
- textContent renders the preview as text instead of interpreting it as HTML.
Best practices
- Prefer textarea for simple form text unless rich editing is needed.
- Do not insert untrusted editor HTML into another page without sanitization.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
contenteditable
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 3 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 9
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1 · When a <canvas> element is at the end of a <p> inside a contenteditable element, the cursor cannot be moved behind the canvas or the canvas deleted with Backspace. See bug 389067061.
Firefox
- From 3 · When a <canvas> element is at the end of a <p> inside a contenteditable element, the cursor cannot be moved behind the canvas or the canvas deleted with Backspace. See bug 873883.
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 9
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18 · When a <canvas> element is at the end of a <p> inside a contenteditable element, the cursor cannot be moved behind the canvas or the canvas deleted with Backspace. See bug 389067061.
Firefox for Android
- From 4 · When a <canvas> element is at the end of a <p> inside a contenteditable element, the cursor cannot be moved behind the canvas or the canvas deleted with Backspace. See bug 873883.
Samsung Internet
- From 1.0 · When a <canvas> element is at the end of a <p> inside a contenteditable element, the cursor cannot be moved behind the canvas or the canvas deleted with Backspace. See bug 389067061.
Node.textContent
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 9
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 3
Edge
- From 12
Opera
- From 9
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.