JS: Select All Text in a Contenteditable Div (Range API)

To select all text inside a contenteditable div when it’s clicked, create a Range covering the div’s contents and apply it as the current Selection. The Range/Selection API is the modern, supported way; document.execCommand('selectAll') still works but is deprecated.

Contents

The vanilla JS pattern
jQuery variant
Inline shortcut (deprecated but works)
Select on focus instead of click
For form inputs (not contenteditable)
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 in Chrome 124, Firefox 125, Safari 17. Originally published 2024-03-28, rewritten and updated 2026-05-17.

The vanilla JS pattern

const editable = document.getElementById('editable-div');

editable.addEventListener('click', () => {
    const range     = document.createRange();
    range.selectNodeContents(editable);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
});

document.createRange() — creates a Range object you can position anywhere in the document.
range.selectNodeContents(el) — sets the range to cover everything inside the element (its descendants, not the element itself).
window.getSelection() — the current selection (highlighted text) in the document.
selection.removeAllRanges() — clear any existing selection.
selection.addRange(range) — apply our new range, which highlights everything inside the div.

jQuery variant

$('#editable-div').on('click', function () {
    const range     = document.createRange();
    range.selectNodeContents(this);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
});

Inside the handler, this is the raw DOM element, so we pass it directly to selectNodeContents. No need for this[0] or $(this)[0].

Inline shortcut (deprecated but works)

<div
    contenteditable="true"
    id="editable-div"
    onclick="document.execCommand('selectAll', false, null)">
  Click here to edit the text...
</div>

One line of HTML, no JavaScript file. Works today but document.execCommand is officially deprecated — fine for one-off prototypes, not for production.

Select on focus instead of click

editable.addEventListener('focus', () => {
    const range = document.createRange();
    range.selectNodeContents(editable);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
});

Tabbing into the element auto-selects too. Often the friendlier UX — users get a “ready to type” experience whether they reached the field via tab or click.

For form inputs (not contenteditable)

<input type="text" id="username">

<script>
document.getElementById('username').addEventListener('focus', function () {
    this.select();
});
</script>

<input> and <textarea> have their own .select() method — much simpler than building a Range. Use it for normal form fields; reserve the Range/Selection API for contenteditable.

Frequently asked questions

Why not use document.execCommand('selectAll')?

It works today, but document.execCommand is officially deprecated. MDN flags it as obsolete and browsers may eventually drop support. The Range + Selection API is the supported successor and works in every modern browser. New code should use the Range version.

Will this work inside an <input> or <textarea>?

No — those have their own selection model. For form inputs, use input.select() or input.setSelectionRange(0, input.value.length). The Range/Selection API in this guide is specifically for non-form elements that have contenteditable="true".

How do I select all on focus instead of on click?

Same code, different event: el.addEventListener('focus', selectAll). Note that click fires before focus, and clicking inside the div places the cursor at the click position. Using focus instead means tabbing into the element also auto-selects, which is often the friendlier UX.

Can I select a specific child node or a sub-range?

Yes — range.selectNode(child) selects a single child element (including the wrapper), and range.setStart(node, offset) + range.setEnd(...) pins both ends of the selection. selectNodeContents is the “everything inside this element” shortcut.