Информер курса валют ЦБ РФ   •   Магазин расширений
378 просм
0 комм
Поделиться:

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

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

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

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

Как определить, был ли выделен текст на 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» – это все тот же класс элемента, в котором проверяем выделение текста.

0
комментариев
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.
Подняться наверх