Я создаю HTML-интерфейс с некоторыми текстовыми элементами, такими как имена вкладок, которые выглядят плохо при выборе. К сожалению, пользователю очень легко дважды щелкнуть имя вкладки, которое по умолчанию выбирает его во многих браузерах.
Я мог бы решить это с помощью трюка JavaScript (я тоже хотел бы получить эти ответы), но я действительно надеюсь что-то в CSS/HTML напрямую, что работает во всех браузерах.
В большинстве браузеров это может быть достигнуто с помощью 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"));
<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
Все правильные варианты CSS:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Попробуйте следующее:
<div onselectstart="return false">some stuff</div>
Простой, но эффективный... работает в текущих версиях всех основных браузеров.
В Firefox вы можете применить объявление CSS "-moz-user-select" к "none". Проверьте их документацию, user-select.
Это "предварительный просмотр" будущего "user-select", как говорится, поэтому, возможно, Opera или WebKit браузеры будут поддерживать это. Я также вспоминаю поиск чего-то для Internet Explorer, но я не помню, что:).
В любом случае, если это не особая ситуация, когда выбор текста делает некоторые динамические функции неудачными, вы не должны переопределять то, что пользователи ожидают от веб-страницы, и это может выбрать любой текст, который они хотят.
Я нахожу некоторый уровень успеха с описанным здесь CSS http://www.quirksmode.org/css/selection.html:
::selection {
background-color: transparent;
}
Он позаботился о большинстве проблем, которые у меня были с некоторыми элементами ThemeRoller ul в приложении AIR (движок WebKit). По-прежнему получается небольшой (около 15 х 15) патч небытия, который выбирается, но половина страницы была выбрана раньше.
Абсолютно позиционируйте divs над текстовой областью с более высоким z-индексом и дайте этим divs прозрачную фоновый рисунок GIF.
Обратите внимание на немного больше мысли. Вам нужно будет связать эти "обложки", чтобы щелкнуть по ним, чтобы вы могли туда попасть, что означает, что вы могли/должны были сделать это с помощью набора элементов привязки до display:box, ширины и высоты, а также прозрачного фонового изображения.
Пример того, почему может быть желательно подавить выбор, см. SIMILE TImeline, в котором используется drag-and-drop для изучения временная шкала, во время которой случайное вертикальное перемещение мыши вызывает неожиданное выделение ярлыков, что выглядит странно.
Для Safari -khtml-user-select: none, как и Mozilla -moz-user-select (или, в JavaScript, target.style.KhtmlUserSelect="none";).
"Если ваш контент действительно интересен, тогда вы можете немного в конечном счете, чтобы защитить его"
Это правда, но большинство копий, по моему опыту, не имеют ничего общего с "в конечном счете" или вундеркиндами или определенными плагиатами или что-то в этом роде. Обычно это случайное копирование невежественными людьми, и даже простая, легко побежденная защита (легко побежденная такими людьми, как мы,) работает достаточно хорошо, чтобы остановить их. Они ничего не знают о "источнике просмотра" или кешах или чем-то еще... черт возьми, они даже не знают, что такое веб-браузер или что они его используют.
Здесь 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 сделает это более надежным способом, то есть добавит поддержку только тех поставщиков, которые вы выбрали.
Изображения также могут быть выбраны.
Существуют ограничения на использование JavaScript для отмены выбора текста, поскольку это может произойти даже в тех местах, где вы хотите выбрать. Чтобы обеспечить богатую и успешную карьеру, избегайте всех требований, которые требуют способности влиять или управлять браузером за пределами обычного... если, конечно, они не платят вам очень хорошо.
Если это выглядит плохо, вы можете использовать CSS для изменения внешнего вида выбранных разделов.
Любой метод JavaScript или CSS легко обойти Firebug (например, случай Flickr).
Вы можете использовать ::selection псевдоэлемент в CSS, чтобы изменить цвет выделения.
Если вкладки являются ссылками, а пунктирный прямоугольник в активном состоянии вызывает беспокойство, вы также можете удалить это (считайте удобство использования).
Существует много случаев, когда отключение избирательности повышает удобство пользователя.
Например, разрешая пользователю копировать блок текста на странице без копирования текста любых связанных с ним элементов интерфейса (которые будут перемежаться внутри копируемого текста).
Следующие действия в Firefox достаточно интересны, если я удаляю строку записи, она не работает. У кого-нибудь есть представление о том, зачем нужна строка записи.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>