it-swarm-ru.tech

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

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

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

132
Tyler

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

41
dimarzionist

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

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

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

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

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

13
Stephen M. Redd

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

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

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

11
Jorge Alves

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

::selection {
    background-color: transparent;
}

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

8
jlleblanc

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

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

6
Dave Rutledge

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

4
Alan Hensel

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

4
pdc

Вот Sass mixin (scss) для тех, кто заинтересован. Compass /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 сделает это более надежным способом, то есть добавит поддержку только тех поставщиков, которых вы выбрали.

3
rgb

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

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

3
Big Bill

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

1
Wedge

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

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

1
Kinjal Dixit

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

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

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

1
Taylor Edmiston

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

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

1
kbcom

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

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