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

Question

На этот вопрос уже есть ответ здесь:

• Как отключить подсветку выделения текста? 40 ответов

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

Возможно, я смог бы решить это с помощью трюка с JavaScript (я бы тоже хотел увидеть эти ответы) - но я действительно надеюсь, что в CSS / HTML есть что-то напрямую, что работает во всех браузерах.

Answer 1

В большинстве браузеров этого можно добиться с помощью 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"));

Answer 2

<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

Answer 3

Все правильные варианты CSS следующие:

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

::selection {
    background-color: transparent;
}

Это решило большинство проблем, которые у меня возникали с некоторыми тематическими роликами ul элементы в приложении AIR (движок WebKit).Все еще получается небольшой (прибл.15 x 15) участок небытия, который будет выбран, но половина страницы была выбрана раньше.

Answer 7

Абсолютно расположите divs над текстовой областью с более высоким z-индексом и придайте этим divs прозрачный вид. GIF-ФАЙЛ фоновая графика.

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

Answer 8

Пример того, почему может быть желательно подавить выделение, см. Временная шкала СРАВНЕНИЯ, который использует перетаскивание для просмотра временной шкалы, во время которого случайное вертикальное движение мыши приводит к неожиданному выделению меток, что выглядит странно.

Answer 9

Для Сафари, -khtml-user-select: none, точно так же, как у Mozilla -moz-user-select (или, в JavaScript, target.style.KhtmlUserSelect="none";).

Answer 10

"Если ваш контент действительно интересен, то вы мало что можете в конечном счете сделать для его защиты"

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

Answer 11

Вот такой Нахальство миксин (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 сделал бы это более надежным способом, т.е.добавляйте поддержку только для выбранных вами поставщиков.

Answer 12

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

Answer 13

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

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

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

Answer 14

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

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

Answer 15

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

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

Answer 16

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

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