Свойство 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

seoonly.ru
seoonly.ru комментирует...

Спасибо конечно) Но слишком узкоспецифичный пост-) Может кому-нибудь и правда поможет

Igor Kouklia
Igor Kouklia комментирует...

Страх, как боюсь в коде копаться, но инфа не хилая. Спасибо.

Константин Кирилюк
Константин Кирилюк комментирует...

2seoonly.ru Согласен, тема специфичная, но никогда не знаешь когда и что может пригодиться. Я это использую в своих сервисах для текстовых элементов, которые оформил под кнопки.

Константин Кирилюк
Константин Кирилюк комментирует...

2Igor Kouklia Чтобы создать оптимальное решение, с кодом придётся разбираться, или нанимать человека, чтоб разобрался. Лично я не люблю копаться в чужом коде, а все эти плагины и прочие универсальные шняги больно громозские и создают нехилую нагрузку на сайт.