Верх страницы
Обложка к записи Запрет выделения текста на веб-странице
Время для прочтения: 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>

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

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

Вы всегда можете нанять меня.

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

12 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Larry
Larry
12 лет назад

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

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'
});
Я
Я
12 лет назад

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

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

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

Oni
Oni
11 лет назад

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

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

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

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы