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