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

Question

Вот интересные вопросы CSS для вас!

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

Answer 1

Я написал простое расширение 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;
} 

Answer 2

Следующий код 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>

Answer 3

Просто обновляю первоначальный, очень одобренный ответ Алеемба с парой дополнений к 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 / статьи / Эфирные-PhoneGap-CSS-WebKit-сенсорный callout.html

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

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

Answer 4

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

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

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);

Rich

Answer 5

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

div {
  pointer-events: none;
}

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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