Свойство user-select, событие onselectstart и атрибут unselectable

Иногда полезно запретить «выделение» текста в HTML-элементе. Чтобы сделать такой «финт ушами» есть свойство user-select, событие onselectstart и атрибут unselectable.

Свойство user-select, событие onselectstart и атрибут unselectable

Свойство user-select

Без «костылей» CSS-свойство user-select не работает:

css user-select support browser

Из спецификации:

The user-select property enables authors to specify which elements in the document can be selected by the user and how. This allows for easier interactions when not all elements are equally useful to select, avoiding accidental selections of neighbouring content. — «Controlling content selection» из «CSS Basic User Interface Module Level 4»

Указывать: user-select:none — сейчас нет смысла, но актуально:

Немного сложнее с JavaScript. Указывать то, что не работает — нет смысла, но проверим:

Свойства MsUserSelect — нет, но есть -ms-user-select. Может, так будет работать?

if( '-ms-user-select' in element.style ) element.style['-ms-user-select'] = 'none';

Событие onselectstart

Первым делом в JavaScript я проверяю поддержку события onselectstart:

if( 'onselectstart' in element ) element.onselectstart = function(){return false};

Его поддерживают: IE, Chrome и Safari, а вот Firefox и Opera (не Chromiun) — «идут лесом».

Атрибут unselectable

Последний, что стоит проверить — атрибут unselectable. Он поддерживается только IE и Opera (не Chromium):

if( 'unselectable' in element ) element.setAttribute('unselectable', 'on');

Из спецификации:

Specifies that an element cannot be selected — «UNSELECTABLE attribute»

jQuery плагин unselect()

Что не париться с запретом выделения текста в HTML-элементах средствами JavaScript, написал простой jQuery-плагин:

$.fn.unselect = function(){
  return this.each(function(){
    if( 'onselectstart' in this ){
      this.onselectstart = function(){return false};
    } else if( 'MozUserSelect' in this.style ){
      this.style.MozUserSelect = 'none'
    } else if( 'WebkitUserSelect' in this.style ){
      this.style.webkitUserSelect = 'none';
    } else if ('unselectable' in this ) {
      this.setAttribute('unselectable', 'on');
    }
  });
};

Использовать так:

$('.unselect').unselect();

Короткая ссылка: http://goo.gl/5rKV4H