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

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

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

Ответ 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;
}

Ответ 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>

Ответ 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;
}

У нас появилось предложение добавить запись в веб-кит:
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';

Ответ 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);

Рич

Ответ 5

вы можете попробовать следующее:

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

Ответ 6

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

Ответ 7

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

div {
  pointer-events: none;
}

Ответ 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*/
}

Ответ 9

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

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

Ответ 10

Использование

onselectstart = "return false"

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

Ответ 11

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

Ответ 12

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