Артём Мáлков

Определяем, был ли выделен текст на JavaScript/jQuery

15 апр0 комм

Некоторое время назад мы представили аудитории вариант скрипта, который позволяет осуществить быстрое выделение и копирование текста одним нажатием на него.

Скрипт работает без проблем, но один из пользователей задался вопросом о том, как его можно улучшить и разрешить пользователям выделять отдельно взятые участки без выделения всего содержимого.

Этот вопрос мы успешно решили в комментариях, а в качестве небольшого бонуса и лучшего ориентира для всех вебмастеров мы представляем эту статью.

Как определить, был ли выделен текст на JavaScript?

Итак, чтобы определить, был ли выделен отдельный участок текста, воспользуемся следующим кодом:

document.querySelector(".content").onmouseup = function() {
  
	var selected_text = "";
	
	if(window.getSelection) {
		
		selected_text = window.getSelection().toString();
	
	} else if(document.selection && document.selection.type != "Control") {
		
		selected_text = document.selection.createRange().text;
	
	}
	
	if(selected_text != "") {
		
		// Действие, если текст выделен
		
	}

};

Здесь «.content» – это класс элемента, в котором проверяем выделение текста. Стоит обратить внимание, что переменная selected_text содержит в себе ту часть текста, которую выделил человек (при условии, что он был выделен), так что по необходимости вы можете использовать содержимое выделенной части в вашем скрипте.

Как определить, был ли выделен текст на jQuery?

В jQuery мы не будем сильно заморачиваться и используем заготовку из JavaScript, заменим лишь событие onmouseup из JavaScript на mouseup из jQuery:

$(".content").mouseup(function() {
 
	var selected_text = "";
	
	if(window.getSelection) {
		
		selected_text = window.getSelection().toString();
	
	} else if(document.selection && document.selection.type != "Control") {
		
		selected_text = document.selection.createRange().text;
	
	}
	
	if(selected_text != "") {
		
		// Действие, если текст выделен
		
	}

});

Здесь «.content» – это все тот же класс элемента, в котором проверяем выделение текста.

Рекомендуем к просмотру
Реализация методов fadeOut и fadeIn из jQuery на JavaScript
Модули и скрипты
Выполнение (запуск) скрипта после загрузки страницы на jQuery/JavaScript
Посты
Выделение содержимого div по клику на него + копирование на jQuery
Модули и скрипты
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера