Как отключить выделение текста с помощью CSS или JavaScript? [дубликат]
Возможные Дубликаты:
правило CSS для отключения выделения текста
Я делаю HTML/CSS/jQuery галерея, с несколькими страницами.
У меня действительно есть кнопка "Далее", которая является простой ссылкой на прослушиватель щелчка jQuery.
проблема в том, что если пользователь нажимает кнопку несколько раз, то выбирается текст кнопки, а затем и полная строка текста. В моем действительно темном дизайне это действительно уродливо и бессмысленно.
Итак, вот мой вопрос: Вы можете отключить выделение текста на HTML?
Если нет, я буду ужасно скучать по flash и его высокому уровню конфигурации на текстовых полях...
5 ответов:
<div style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" onselectstart="return false;" onmousedown="return false;"> Blabla </div>
обновление январь, 2017:
По данным могу ли я использовать на
user-selectв настоящее время поддерживается во всех браузерах, кроме Internet Explorer 9 и более ранних версий (но, к сожалению еще требуется префикс поставщика).
все правильные варианты CSS:
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }<p> Selectable text. </p> <p class="noselect"> Unselectable text. </p>
обратите внимание, что это нестандартные функции (т. е. не является частью спецификации). Это не гарантируется, чтобы работать везде, и могут быть различия в реализации среди браузеров и в будущем браузеры могут отказаться от поддержки для него.
дополнительную информацию можно найти в документация Mozilla Developer Network.
попробуйте этот код CSS для кросс-браузерной совместимости.
-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
вы можете использовать JavaScript, чтобы делать то, что вы хотите:
if (document.addEventListener !== undefined) { // Not IE document.addEventListener('click', checkSelection, false); } else { // IE document.attachEvent('onclick', checkSelection); } function checkSelection() { var sel = {}; if (window.getSelection) { // Mozilla sel = window.getSelection(); } else if (document.selection) { // IE sel = document.selection.createRange(); } // Mozilla if (sel.rangeCount) { sel.removeAllRanges(); return; } // IE if (sel.text > '') { document.selection.empty(); return; } }мыльницей: Вы действительно не должны трахаться с агентом пользователя клиента таким образом. Если клиент хочет выбрать вещи в документе, то они должны иметь возможность выбирать вещи в документе. Это не имеет значения, если вы Не нравится цвет подсветки, потому что вы не тот, кто просматривает документ.
Я не уверен, что вы можете отключить его, но вы можете изменить его цвета:)
myDiv::selection, myDiv::-moz-selection, myDiv::-webkit-selection { background:#000; color:#fff; }тогда просто сопоставьте цвета с вашим" темным " дизайном и посмотрите, что произойдет:)
Comments