Чи є спосіб зробити DIV невідбірним?

Ось цікаві питання CSS для вас!

У мене є текстова область з прозорим фоном, накриваючи деякий ТЕКСТ, який я хотів би використовувати як своєрідний водяний знак. Текст великий і займає більшість текстових областей. Це виглядає приємно, проблема полягає в тому, що користувач натискає текстову область, а іноді вибирає текст водного знака. Я хочу, щоб текст водяного знаку ніколи не був обраний. Я очікував, що якщо щось нижче в z-індексі, це не буде вибір, але браузери, здається, не дбають про шари z-індексу під час вибору елементів. Чи є хитрість чи спосіб зробити так, щоб цей 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 також повинно вплинути на "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);

Багатий

Ви можете використовувати 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-індексу для роботи для вибору. У мене було подібне питання, і це вирішило це для мене.

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