JavaScript Range.collapsed — чи діапазон порожній

Властивість collapsed каже, чи збігаються початок і кінець діапазону: true означає, що діапазон порожній.

правити

Загальний опис

Схлопнутий діапазон — це і є курсор: точка без ширини. Тобто текстовий курсор у полі вводу і виділення нульової довжини — одне й те саме з погляду DOM.

Перевіряти цю властивість треба перед будь-якою дією над виділенням: інакше кнопка «жирний» спрацює на порожнечі.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	9	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p id="editor">Виділений текст стане жирним</p>

// у демо виділення створюємо самі; вручну виділи текст і спробуй ще раз
const initialRange = document.createRange();
initialRange.selectNodeContents(document.getElementById('editor').firstChild);
window.getSelection().removeAllRanges();
window.getSelection().addRange(initialRange);

const range = window.getSelection().getRangeAt(0);

if (range.collapsed) {
    console.log('Це просто курсор, а не виділення');
} else {
    range.surroundContents(document.createElement('b'));
    console.log('Виділене загорнуто в <b>');
}