Верх страницы
Логотип Telegram
@Злой_Полицейский — авторский канал вашего покорного слуги в Telegram, где я пишу заметки о веб-разработке, программировании, PHP, инструментах и WordPress.
Обложка к записи Запрет выделения текста на веб-странице
Время для прочтения: 0 мин. 5 сек.

Запрет выделения текста на веб-странице

Бывают ситуации, когда пользователю необходимо запретить выделять текст на веб-странице или в каком-то определенном блоке, например при Drag&Drop. Попробуем найти кроссбраузерное решение.

Средствами HTML и CSS

Для запрета выделения текста есть свойство user-select, которое, естественно, пока не кроссбраузерно, но у каждого из браузеров уже есть реализация данного функционала. Берем кучу вендорных префиксов и получаем следующее:

*[unselectable=on] { 
	-moz-user-select: none; 
	-o-user-select:none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
}

IE, как всегда, выделился, поэтому для него существует отдельный атрибут тега unselectable:

<div unselectable="on" onselectstart="return false;">текст</div>

Если в IE начать выделять текст за рамками этого элемента, то он очень хорошо выделяется

Средствами JavaScript (jQuery)

Суть скрипта — добавить все тот же набор CSS-правил для всех браузеров, создать атрибут unselectable и вернуть false при возникновении события onselectstart в IE.

Завернем наш скрипт в плагин, например jquery.disableSelection.js

jQuery.fn.extend({ 
	disableSelection : function() { 
		this.each(function() { 
			this.onselectstart = function() { return false; }; 
			this.unselectable = "on"; 

			jQuery(this).css({ 
				'-moz-user-select': 'none',
				'-o-user-select': 'none',
				'-khtml-user-select': 'none',
				'-webkit-user-select': 'none',
				'-ms-user-select': 'none',
				'user-select': 'none'
			}); 

			// Для Opera 
			jQuery(this).bind('mousedown', function() { return false; }); 
		}); 
	} 
});

На веб-странице вызываем его так:

<script type="text/javascript">
jQuery(function(){
	jQuery('body *').disableSelection();
});
</script>

Автор: Кобзарёв Михаил

Суровый русский разработчик. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все.

Ведет блог о разработке, дайджест в телеграмме и в ВК.

Комментарии
Подписаться
Уведомить о
guest

12 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Larry
Larry
11 лет назад

Что же вы советуете людям, читающим блог? Очень неоптимизированная часть скрипта:

jQuery(this).css('-moz-user-select', 'none');
jQuery(this).css('-o-user-select', 'none');
jQuery(this).css('-khtml-user-select', 'none');
jQuery(this).css('-webkit-user-select', 'none');
jQuery(this).css('-ms-user-select', 'none');
jQuery(this).css('user-select', 'none');

заменить на

jQuery(this).css({
    '-moz-user-select': 'none',
    '-o-user-select': 'none',
    '-khtml-user-select': 'none',
    '-webkit-user-select': 'none',
    '-ms-user-select': 'none',
    'user-select': 'none'
});
Я
Я
11 лет назад

для оперы не работает

Егор
Егор
11 лет назад

Детские шалости. Обойти — 3 сек времени.

Oni
Oni
10 лет назад

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

Виктор
10 лет назад

Спасибо за статью.
Вы случайно не знаете, как грамотно сделать, чтобы выделение действовало на всё, кроме, допустим, инпутов.
$j(‘body *’).not(«input»).disableSelection(); — не работает