Запрет выделения текста с помощью jQuery
На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время javascript. А чаще в проектах где приходится крутить слайдеры, кастомные скролы, drag&drop. Т.к. здесь активно участвуют события нажатия и перетаскивание которые также выделяют текст на сайте… хотя это не требовалось. Поэтому я часто пользуюсь данными функциями…
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
},
enableSelection : function() {
this.each(function() {
this.onselectstart = function() {};
this.unselectable = "off";
jQuery(this).css('-moz-user-select', 'auto');
});
}
});
// кроссбраузерный вызов
$(document).ready(function(){
$('body *').disableSelection();
});
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
},
enableSelection : function() {
this.each(function() {
this.onselectstart = function() {};
this.unselectable = "off";
jQuery(this).css('-moz-user-select', 'auto');
});
}
});
// кроссбраузерный вызов
$(document).ready(function(){
$('body *').disableSelection();
});
$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.
- disableSelection – запрет выделения
- enableSelection – возврат выделения
Ничего нового я в этой статье не открыл, а просто хотел поделится функциями с вами, т.к. до определенного момента вечно искал что-то подобное в инете.
19 Коментариев to Запрет выделения текста с помощью jQuery
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Спасибо, вот это действительно полезные функции!
Вопрос: а к какому события лучше привязать это функции? Первым в мысль идет на div (допустим с каруселью) на событие hover, правильно ли это?
еще, не могли бы вы описать какая из этих 3 строчек для какого браузера?
this.onselectstart
this.unselectable
jQuery(this).css // это как я понял для хрома и лисицы
Алексей, Вы молодец! Как всегда – как раз то, что надо!
Кстати, пора бы уже завести твиттер ;)
Функции нужно применять для тех случаев, когда вы нажимая мышкой, что-то перетягиваете – что бы параллельно с этим не выделялся текст на сайте.
this.unselectable = "on"; // IE, Opera
jQuery(this).css('-moz-user-select', 'none'); // FF
Пока только зарегистрировался в twitter, что к чему пока еще не знаю, но ссылку на этот пост там уже разместил.
twitter.com/MarkupDeveloper
СУПЕР!!! Давно искал ответ на этот вопрос! ОГРОМНОЕ СПАСБО!!!
Эх, если б ещё научиться не разрешать стёбать картинки!
Может для защиты картинок как то отключить правую кнопку мышки? Вот только как? Алексей, Вы случайно не вразумите?
Находил в интернете несколько методик, но они увы небыли кроссбраузерными, поэтому не брал их на вооружение. Поэтому что-то конкретное посоветовать не могу.
Вот этот скриптик вроде как работает во всех браузерах, только вот в ie6 через панель инструментов изображения всё равно можно сохранять. Как бороться с этой панелью???
function clickIE() {
if (document.all) {
(message);
return false;}}
function clickNS(e) {
if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2) {
(message);
return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;
document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function(“return false”)
спасибки за скриптик. и хорошо, что на твитере зарегались, так многим будет проще следить за обновлениями ваших статей
В интернете информацию спрятать невозможно. То же самое и с картинками: запрещай, не запрещай – так или иначе все равно скачают, кому нужно будет:)
а Твиттер это кул, осталось только в блог кнопку добавить
Спасибо) Как раз тот случай (делаю горизонтальный скроллер), как раз то что нужно
Глупые “скрывальщики” текста и картинок от якобы копирования, как раздражают ваши сайты (хотя такие люди не могут стоящего создать ничего), обычно на них заходишь два раза, первый и последний. Это учитывая что мне ничего тырить не надо, а просто нет удобства, когда по каким-то причинам надо скопировать часть текста…
Автору респект ).
Приветствую автора.
спользовал Ваш скрипт, спасибо.
Однако со временем напоролся на конфликт имен. Переименуйте disableSelection и enableSelection как-нибудь по-другому (например disableTextSelection). Аналогичные имена используются в UI в виджете “Dialog” (замучался отлаживать)
а есть у вас скрипт на запрет копирования картинок?? Заранее спасибо
Такие скрипты легко обходятся, поэтому я ими не пользуюсь. Но помоему в инете видел.