Выделение текста в параграфе при тройном клике JS

Бывает необходимо выделить текст параграфа тройным кликом, но если этот текст содержит переносы br - то выделение будет ограничено

Например есть такой html:

<p>Lorem ipsum<br />новая строка<br />третья строка</p>

если мы попытаемся выбрать текст тройным кликом, то выберем только часть. Один из вариантов проверять тройной клик при помощи JS и выбирать абзац. Для того чтобы ограничить такие действия - лучший вариант ограничить классом блока (например click3selectPText)

JS скрипт будет следующим:

document.addEventListener('DOMContentLoaded', function() {

    const clickElement = document.querySelector('.click3selectPText');

   

    if (clickElement) {

        let lastClickTime = 0;

        let clickCount = 0;

       

        clickElement.addEventListener('click', function(e) {

            const currentTime = new Date().getTime();

           

            // Если прошло больше 500ms с последнего клика - сбрасываем счетчик

            if (currentTime - lastClickTime > 500) {

                clickCount = 0;

            }

           

            clickCount++;

            lastClickTime = currentTime;

           

            // Если это тройной клик

            if (clickCount === 3) {

                const paragraph = this.querySelector('p');

                if (paragraph) {

                    selectAllText(paragraph);

                    e.preventDefault();

                }

                clickCount = 0;

            }

        });

       

        function selectAllText(element) {

            const selection = window.getSelection();

            const range = document.createRange();

            range.selectNodeContents(element);

            selection.removeAllRanges();

            selection.addRange(range);

        }

    }

});

Класс можно изменить на свой, возможно какой-то уже используете для текста контента

Подобные материалы

CRG Home 2026

Не является публичной офертой.