Есть ли способ сделать DIV недоступным для выбора?

Вот вам интересный вопрос по CSS!

У меня есть текстовое поле с прозрачным фоном, наложенное на ТЕКСТ, который я хотел бы использовать как своего рода водяной знак. Текст большой и занимает большую часть текстового поля. Выглядит красиво, проблема в том, что когда пользователь нажимает на текстовое поле, он иногда вместо этого выбирает текст водяного знака. Я хочу, чтобы текст водяного знака нельзя было выбирать. Я ожидал, что если что-то будет ниже в z-index, его нельзя будет выбрать, но браузеры, похоже, не заботятся о слоях z-index при выборе элементов. Есть ли уловка или способ сделать так, чтобы этот DIV никогда не выбирался?

Некоторое время назад я написал простое расширение jQuery, чтобы отключить выделение: Отключение выделения в jQuery . Вы можете вызвать его через$('.button').disableSelection();

В качестве альтернативы, используя CSS (кроссбраузерность):

.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
} 

Следующий код CSS работает почти в современном браузере:

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Для IE вы должны использовать JS или вставить атрибут в тег html.

<div id="foo" unselectable="on" class="unselectable">...</div>

Просто обновите оригинальный, получивший множество голосов ответ aleemb с парой дополнений к css.

Мы использовали следующую комбинацию:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Мы получили предложение добавить запись webkit-touch от:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015, апрель: просто обновляю свой ответ, добавляя вариант, который может пригодиться. Если вам нужно сделать выбор / отмену выбора DIV на лету и вы хотите использовать Modernizr , в javascript аккуратно работает следующее:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Как уже предположил Йоханнес, фоновое изображение, вероятно, лучший способ добиться этого только в CSS.

Решение JavaScript также должно влиять на «перетаскивание», чтобы оно было эффективным во всех популярных браузерах.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Богатый

Вы можете использовать pointer-events: none;в своем CSS

div {
  pointer-events: none;
}

вы можете попробовать это:

<div onselectstart="return false">your text</div>

Разве не хватит простого фонового изображения для текстовой области?

Браузеры WebKit (например, Google Chrome и Safari) имеют решение CSS, аналогичное Mozilla -moz-user-select: none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Также в IOS, если вы хотите избавиться от серых полупрозрачных оверлеев, появляющихся при касании, добавьте css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

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

onselectstart = "вернуть ложь"

это предотвращает копирование вашего контента.

Убедитесь, что вы явно задали положение как абсолютное или относительное, чтобы z-index работал при выборе. У меня была аналогичная проблема, и это решило ее для меня.

Не уверен в вашем варианте использования, но вы можете сделать его перетаскиваемым.