document.designMode controls whether the entire document is editable. Valid values are "on" and "off" (MDN). The specification defaults to "off".
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use document.designMode. Start with this line.
document.designMode| Call | What it does |
|---|---|
document.designMode | Primary signature. |
Built into the browser. Read or assign document.designMode — no import required.
document.designMode| Parameter | Description |
|---|---|
| Value | Optional. "on" or "off" (MDN) |
| Writable? | Required. Getter and setter |
| Return Value | Description |
|---|---|
| * | The current value of document.designMode. |
designModeMost pages start with editing off.
console.log(document.designMode); // "off" (typical)"off" on a normal page (spec default)."on" and "off" (MDN)."on" / "off"Assign the string values to enable or disable whole-document editing.
document.designMode = "on";
console.log(document.designMode); // "on"
document.designMode = "off";
console.log(document.designMode); // "off""on" — the whole document becomes editable."off" — editing stops.MDN pattern: enable designMode on an iframe’s document.
const iframe = document.querySelector("iframe");
iframe.contentDocument.designMode = "on";
console.log(iframe.contentDocument.designMode); // "on"Document.designMode is a long-standing HTML Document property. Valid values are "on" and "off". Modern browsers follow the "off" default; older engines had quirks around "inherit" and capitalization (MDN).
Controls whole-document editability. Use "on" / "off". Prefer contenteditable for scoped editors.
Bottom line: Supported across major browsers. See the MDN designMode reference.
Continue with the Document dir property.
9 people found this page helpful