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

Абсолютно расположите блоки div над текстовой областью с z-индексом выше и сделайте эти блоки прозрачным фоновым изображением Гифка.

Обратите внимание, после немного дополнительных размышлений - вам нужно будет связать эти «обложки», чтобы щелкнув по ним, вы переместились бы туда, где должна была находиться вкладка, что означает, что вы можете / должны сделать это с элементом привязки, установленным на display:box, ширина и высота, а также прозрачное фоновое изображение.

Также можно выбирать изображения.

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

Для Firefox вы можете применить объявление CSS «-moz-user-select» к «none». Ознакомьтесь с их документацией, выбор пользователя.

Это «предварительный просмотр» будущего «пользовательского выбора», как они говорят, так что, возможно, браузеры на основе Опера или WebKit будут поддерживать это. Еще помню, что нашел кое-что для Internet Explorer, но не помню, что именно :).

В любом случае, если это не конкретная ситуация, когда выделение текста приводит к сбою некоторых динамических функций, вам не следует действительно переопределять то, что пользователи ожидают от веб-страницы, а именно возможность выбрать любой текст, который они хотят.

<script type = "text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart! = "undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect! = "undefined") //Firefox route
        target.style.MozUserSelect = "none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id = "mydiv"


</script>

РЕДАКТИРОВАТЬ

Код явно исходит от http://www.dynamicdrive.com

Попробуй это:

<div onselectstart = "return false">some stuff</div>

Просто, но эффективно ... работает в текущих версиях всех основных браузеров.

Если это выглядит плохо, вы можете использовать CSS, чтобы изменить внешний вид выбранных разделов.

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

Я нахожу некоторый успех с описанным здесь CSS http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

Он решил большинство проблем, которые возникали у меня с некоторыми элементами ThemeRoller ul в приложении AIR (движок WebKit). По-прежнему получается небольшой (примерно 15 x 15) фрагмент небытия, который выбирается, но половина страницы была выбрана раньше.

Для Safari - -khtml-user-select: none, как и в Mozilla -moz-user-select (или, в JavaScript, target.style.KhtmlUserSelect = "none";).

Следующее работает в Firefox достаточно интересно, если я удалю строку записи, это не сработает. У кого-нибудь есть понимание, зачем нужна линия записи.

<script type = "text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>

Любой метод JavaScript или CSS легко обойти с помощью Firebug (как в случае с Flickr).

Вы можете использовать Псевдоэлемент ::selection в CSS, чтобы изменить цвет выделения.

Если вкладки являются ссылками и пунктирный прямоугольник в активном состоянии вызывает беспокойство, вы также можете удалить его (конечно, учитывайте удобство использования).

В большинстве браузеров этого можно добиться с помощью CSS:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Для IE <10 и Opera вам нужно будет использовать атрибут unselectable элемента, который вы хотите отключить. Вы можете установить это с помощью атрибута в HTML:

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

К сожалению, это свойство не наследуется, а это означает, что вам нужно поместить атрибут в начальный тег каждого элемента внутри <div>. Если это проблема, вы можете вместо этого использовать JavaScript, чтобы сделать это рекурсивно для потомков элемента:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Все правильные варианты CSS:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

"If your content is really interesting, then there is little you can ultimately do to protect it"

Это правда, но по моему опыту, большая часть копирования не имеет ничего общего с «в конечном итоге», компьютерными фанатами, решительными плагиаторами или чем-то в этом роде. Обычно это случайное копирование невежественными людьми, и даже простая, легко поддающаяся поражению защита (то есть такая защита, которую легко преодолевают такие люди, как мы), работает достаточно хорошо, чтобы остановить их. Они ничего не знают о «исходном коде просмотра», кэшах или еще чем-нибудь ... черт возьми, они даже не знают, что такое веб-браузер и что они его используют.

Во многих случаях отключение возможности выбора улучшает взаимодействие с пользователем.

Например, позволяя пользователю копировать блок текста на странице без копирования текста каких-либо связанных с ним элементов интерфейса (которые будут вкраплены в копируемый текст).

Вот миксин Sass (scss) для заинтересованных. Компас / CSS 3, похоже, не имеет миксина, выбираемого пользователем.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Хотя Compass сделает это более надежно, то есть добавит поддержку только для выбранных вами поставщиков.