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

Бывают ситуации, когда пользователю необходимо запретить выделять текст на веб-странице или в каком-то определенном блоке, например при 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>

CSS CSS3 HTML