Выделение текста

02.10.2013

Приведу пример, как программно выделять текст, при клике на него (так сделано на этом сайте с вставками кода). Найти пример как выделять принудительно текст на странице, труда не составило. Но возникла проблема, текст выделялся целиком, не только при клике, но и при ручном выделении части текста. Меня, такое поведение не устраивало. Решить проблему оказалось не сложно. Привожу код с комментариями:


     $('code').on('click',function() {//Вешаем на клик
        var rng, sel;
        if ( document.createRange ) {//Не все браузеры поддерживают createRange 
            rng = document.createRange();//создаем объект область
            rng.selectNode( this )//выберем текущий узел
            sel = window.getSelection();//Получаем объект текущее выделение
            var strSel = ''+sel; //Преобразуем в строку (ох уж js...)
            if (!strSel.length) { //Если ничего не выделено
                sel.removeAllRanges();//Очистим все выделения (на всякий случай) 
                sel.addRange( rng ); //Выделим текущий узел
            }
        } else {//Если браузер не поддерживает createRange (IE<9, например)
            //Выделяем таким образом, уже без всяких проверок
            var rng = document.body.createTextRange();
            rng.moveToElementText( this );
            rng.select();
        }
    });

PS проверка на то что выделено вручную часть текста, не работает для браузеров, не поддерживающих createRange (в частности IE<9), да и бог с ним. Может это и можно решить, но такую задачу я для себя не ставил.

Комментарии:

njv

24.10.2014 14:51:17

Выложите исходник примера, пожалуйста. Делаю с Вашим кодом - не работает. Сохраняю эту страницу - не работает. Но на этой странице же выделяется! Вот загадка.

Максим

24.10.2014 15:34:12

njv

24.10.2014 15:38:24

Спасибо! Теперь работает. Странно, что я так же делал, но не работало. Возможно дело было в версии jquery

Алекс

30.01.2019 21:53:16

Извините, а вы не подскажете, как удалить выделенную область из документа?

Алекс

30.01.2019 22:59:41

Просьба больше не актуальна )) Я во всём разобрался! Ура!

Оставить комментарий:

Представьтесь пожалуйста:
Электронная почта:
Электронный адрес не публикуются
Текст сообщения:
Для подсветки кода, оборачивайте ваш код в теги <code></code>
Введите 5 цифр с картинки:

Рекомендую:

Поделюсь промокодами для хостинга TimeWeb!

Поддержать проект: