Как отключить выделение текста на веб-странице
Я пытаюсь сделать веб-страницу очень родной. Как удалить выбор, выбрать все свойство на веб-странице?
selva_pollachi 07 сен. 2012, в 12:17
Поделиться
Вы получили до сих пор три совершенно разных ответа: может быть, вам лучше уточнить, что именно «родной» означает именно для вас и что вы хотите удалить
fcalderan 07 сен. 2012, в 09:42
То, что вы пытаетесь сделать, — это запретить пользователю выделять текст перетаскиванием мыши и копировать его или использовать CTRL + A (Windows), чтобы выделить все и скопировать, верно?
Henrik Ammer 07 сен. 2012, в 09:42
да, правильно. запретить пользователю выбирать всю веб-страницу, а не только текст, все на веб-странице
selva_pollachi 07 сен. 2012, в 09:46
@Pavlo Это не дубликат этого. То есть об удалении выделения, об удалении возможности скопировать что-либо с веб-страницы. Так что это дубликат, но из этого один stackoverflow.com/questions/9958478/…
Henrik Ammer 07 сен. 2012, в 09:54
@selva И на этот вопрос, проверьте следующий ответ Кристоф , stackoverflow.com/questions/9958478/…
Henrik Ammer 07 сен. 2012, в 09:55
@HenrikAmmer мы разрабатываем оффлайн сайт. Нам нужно дать некоторые ограничения. Поэтому нам нужно запретить пользователю выбирать свойства. В любом случае, спасибо, чувак.
selva_pollachi 07 сен. 2012, в 10:04
@selva Что вы подразумеваете под «собственностью»?
Pavlo 07 сен. 2012, в 10:09
Свойство @pavlo является функцией. например, свойство видимости, свойство отображения, выбор и т. д. Я прав?
selva_pollachi 07 сен. 2012, в 10:16
@selva Да, visibility , display , user-select это свойства CSS. Но вы не можете «выбрать» их, вы можете установить их только с помощью так называемого объявления CSS. Проверьте мой ответ.
Pavlo 07 сен. 2012, в 10:25
Показать ещё 7 комментариев
Поделиться:
6 ответов
Лучший ответ
Отключить выбор каждого элемента с помощью CSS
body
Это поддерживается устройствами Chrome, Safari, Firefox, IE 10 и iOS. Подробнее о странице MDN.
Изменить: Если вы хотите, чтобы и оставались доступными в Firefox, добавьте:
input, textarea
Отключить контекстное меню с помощью jQuery
$(document).on("contextmenu", function (event) < event.preventDefault(); >); Pavlo 07 сен. 2012, в 10:36
Поделиться
Спасает мой день. Я не знал, что это может быть так просто в CSS. Я пробовал весь день, используя JavaScript и нашел это.
Vikash Gupta 31 дек. 2018, в 10:52
используйте этот код
body, html
Behnam Mohammadi 12 сен. 2014, в 07:55
Поделиться
Ницца. Я использовал это, но без тега body . Есть ли причина наличия тега body когда он уже применяется ко всему HTML?
Pamela 16 янв. 2016, в 03:13
Этот JavaScript отключит выбор, копирование и вставку содержимого Но если пользователь сохранит страницу на локальном компьютере, они смогут делать «что угодно» с вашим кодом.
//disable cut copy past var message = ""; function clickIE() < if (document.all) < (message); return false; >> function clickNS(e) < if(document.layers || (document.getElementById && !document.all)) < if (e.which == 2 || e.which == 3) < (message); return false; >> > if (document.layers) < document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clickNS; >else < document.onmouseup = clickNS; document.oncontextmenu = clickIE; >document.oncontextmenu = new Function("return false") //for disable select option document.onselectstart = new Function('return false'); function dMDown(e) < return false; >function dOClick() < return true; >document.onmousedown = dMDown; document.onclick = dOClick; Как отключить выделение текста с помощью CSS или JavaScript? [Дубликат]
Я создаю галерею HTML/CSS/jQuery с несколькими страницами. У меня действительно есть «следующая» кнопка, которая является простой ссылкой с помощью прослушивателя jQuery. Проблема в том, что если пользователь несколько раз нажимает кнопку, выбирается текст кнопки, а затем полная строка текста. В моем действительно мрачном дизайне это действительно уродливо и бессмысленно. Итак, вот мой вопрос: Можете ли вы отключить выбор текста в HTML? Если нет, я ужасно пропустил бы вспышку и ее высокий уровень конфигурации на текстовых полях.
daviddarx 23 сен. 2010, в 17:27
Поделиться
Это 2018 год: P Проверьте эти методы —> freakyjolly.com/how-to-disable-text-selection-highlighting
Code Spy 30 окт. 2018, в 09:39
Поделиться:
cross-browser
textselection
5 ответов
Лучший ответ
Blabla Jerome 23 сен. 2010, в 15:20
Поделиться
Все еще не работает в сафари и хром. Я сохраняю это решение, но я также реализую одну работу для остальных: при каждом щелчке заменяйте html-ссылку html-ссылкой. текст обновляется, и выбор проходит через полсекунды!
daviddarx 23 сен. 2010, в 15:39
CSS для webkit похож на CSS для Firefox, я отредактировал ответ, чтобы добавить его.
Jerome 24 сен. 2010, в 05:53
@daviddarx Работает в Chrome 17 и Safari 5.
mhenry1384 29 фев. 2012, в 22:02
Работает в IE и Opera после обновления
Dan 18 июль 2013, в 13:56
Это все еще хорошо в 2014 году?
JohnK 22 янв. 2014, в 19:31
Martin Vseticka 23 авг. 2015, в 11:37
Показать ещё 4 комментария
ОБНОВЛЕНИЕ Январь 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 */ > Selectable text.
Unselectable text.
Обратите внимание, что это нестандартная функция (т.е. не входит в какую-либо спецификацию). Не гарантируется работа везде, и в браузерах могут быть различия в реализации, и в будущем браузеры могут отказаться от поддержки.
Более подробную информацию можно найти в Документация разработчика Mozilla.
Blowsie 16 фев. 2012, в 16:11
Поделиться
«правильные вариации CSS» . Единственный правильный CSS-вариант — user-select .
BoltClock♦ 06 май 2012, в 06:08
Хорошо, так что остальные префиксы, специфичные для поставщика, я бы предположил, что кто-то еще будет классифицировать эти правильные варианты.
Blowsie 08 май 2012, в 07:51
Ха-ха, ты планируешь зарабатывать все свои повторения с тем же ответом? ОТЛИЧНО 🙂
Starx 07 нояб. 2012, в 04:31
Каждый должен знать, где это работает, а где нет caniuse.com/user-select-none
Dan 18 июль 2013, в 13:54
предоставленное решение не работает для браузера Opera. Как установить опцию выбора пользователя для оперы
Raja 18 нояб. 2013, в 05:44
Показать ещё 3 комментария
Попробуйте этот CSS-код для совместимости с несколькими браузерами.
-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; Nyxynyx 22 дек. 2011, в 00:31
Поделиться
Вы можете использовать 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; >>
Мыльная коробка: Таким образом, вы действительно не должны привинчиваться к клиентскому пользовательскому агенту. Если клиент хочет выбрать вещи в документе, они должны иметь возможность выбирать вещи в документе. Не имеет значения, нравится ли вам цвет подсветки, потому что вы не просматриваете документ.
James Sumners 23 сен. 2010, в 17:27
Поделиться
Опровержение мыльницы : у меня есть кнопка, которая при нажатии запускает некоторый javascript для изменения масштаба изображения. У пользователя нет причин выбирать «+» или «-» внутри этой кнопки, но большинство веб-браузеров получат текст, выбранный после нескольких нажатий кнопки. Точно так же, если вы делаете перетаскивание с помощью javascript, вы не хотите выбирать то, над чем вы перетаскиваете. Тем не менее, я ценю тот факт, что вы все еще ответили на вопрос, даже если вы не согласны с целью.
Robert 06 апр. 2012, в 16:59
Я признаю, что существуют обстоятельства, когда это может быть правильным выбором дизайна. Но в вопросе говорилось, что он будет скучать по Flash, подразумевая, что ему будет не хватать возможности контролировать клиент пользователя. Я не согласен с таким способом мышления. Как пользователь, мне не нравится, когда сайт переопределяет, как работает мое локальное программное обеспечение. Это также проблема доступности.
James Sumners 06 апр. 2012, в 17:16
@jsumners Есть много обстоятельств. Подумайте, не задумываясь, и вы придете к нескольким сценариям. Тот факт, что браузеры по умолчанию включают это, не означает, что мы, как программисты, должны это соблюдать. Кроме того, мобильные вычисления покончили с традиционными средствами выделения текста. Так что это становится все более актуальным. Вы заставляете это звучать так, будто это какой-то устаревший хак или что-то в этом роде, это поддерживаемая функция (см. Ответы выше).
b1nary.atr0phy 01 окт. 2012, в 21:49
@b1naryatr0phy b1naryatr0phy еще раз, ОП специально описал сценарий, в котором он хотел контролировать клиента пользователя исключительно по эстетическим причинам. Его цель не имела ничего общего с функцией, будь то прикосновение или что-то еще. В частности, он заявляет, что упустит возможность полностью контролировать взаимодействие пользователя, как он мог бы с Flash. Я считаю, что это неправильный способ разработки для Интернета, и я сказал это после того, как предложил решение, которое не опирается на потенциально нереализованные функции CSS (в то время).
James Sumners 01 окт. 2012, в 22:48
@jsumners Разве это не решение дизайнера сайта, как пользователь взаимодействует со своей страницей, независимо от эстетического или функционального назначения?
b1nary.atr0phy 01 окт. 2012, в 23:47
Это полностью зависит от клиента и / или пользователя. Этот вопрос по сути такой же, как и «как мне контролировать размер шрифта пользователя?» Ответ: ты не можешь. Конечно, вы можете указать все виды материала в таблице стилей, которую вы поставляете вместе со страницей, но я могу выбросить это и использовать свою собственную таблицу стилей, чтобы делать все, что я хочу. То же самое с JavaScript. Но кто хочет сделать это для случайного сайта? Нет, пользователь, который находит своего клиента измененным сайтом, вероятно, никогда не посетит его снова. Читайте alistapart.com/articles/dao, он старый, но все еще применяется.
James Sumners 02 окт. 2012, в 01:16
Если бы это было «полностью до конечного пользователя», то не было бы функциональной разницы между одним сайтом и другим. Поэтому я, честно говоря, не вижу, как это имеет смысл. Я также не понимаю, как этот вопрос можно считать идентичным управлению размером шрифта пользователя. Размер шрифта не является функцией. Выбор текста есть. Любой настоящий программист признал бы, что есть фундаментальная разница.
b1nary.atr0phy 02 окт. 2012, в 10:10
Смысл в вопросе заключается в том, что веб-дизайнер должен иметь полный контроль над тем, как документ представляется / просматривается пользователем. С Flash такой контроль возможен. С простым HTML / CSS / JavaScript это не так. Итак, да, это в основном один и тот же вопрос: «Как мне навязать свою волю пользователю с помощью моего HTML / CSS / JavaScript?» И, опять же, ответ: ты не можешь и не должен . После того как данные покинули ваш сервер, вы не можете контролировать их представление.
Как отключить подсветку выделения текста?
Для якорей, которые действуют как кнопки (например, вопросы, теги, пользователи и т.д. вверху страницы Stack Overflow) или вкладки, есть стандартный способ CSS, чтобы отключить эффект выделения, если пользователь случайно выбирает текст? Я понимаю, что это можно сделать с помощью JavaScript, и небольшая поисковая система с ошибкой предоставила параметр -moz-user-select только для Mozilla. Есть ли стандартный способ выполнения этого с помощью CSS, а если нет, то каков подход «лучшей практики»?
Blowsie 05 май 2009, в 22:21
Поделиться
Могут ли элементы в элементе ведьма отключить подсветку, включить подсветку с помощью css в атрибуте style или class? или, другими словами, есть ли другие значения для -webkit-user-select ect. кроме просто нет?
user659576 14 март 2011, в 21:18
Связанный: stackoverflow.com/questions/16600479/… = как разрешить выбор только некоторых дочерних элементов
JK. 17 май 2013, в 02:36
В некоторых браузерах есть ошибка, из-за которой «Выбрать все» (CTRL + A и CMD + A) по-прежнему выделяет вещи. Это можно бороться с прозрачным цветом выделения: ::selection < background: transparent; >::-moz-selection < background: transparent; >
DaAwesomeP 12 дек. 2014, в 01:03
Могу я просто сказать: пожалуйста, не делай этого. Исходя из моего опыта, я чаще всего хочу выбрать какой-то текст, который также служит кнопкой, чтобы скопировать его в другое место. Было бы невообразимо бешено не иметь возможности сделать это, потому что какой-то веб-разработчик старался отключить эту функцию для меня. Поэтому, пожалуйста, не делайте этого, если у вас нет очень, очень веских причин.
kajacx 30 авг. 2016, в 20:10
@ cram2208 Я согласен, за исключением того, что другой вопрос связан с дубликатом. Этот вопрос старше и имеет больше / лучше ответов.
www139 15 дек. 2016, в 19:14
В 2017 году, это лучший способ использовать postcss и autoprefixer и установить версию браузера, тогда postcss сделает все круто.
AmerllicA 06 дек. 2017, в 11:47
Почему на этот вопрос нет принятого ответа: D?
Pratik Butani AndroidDev 25 фев. 2019, в 11:03
Показать ещё 5 комментариев
Поделиться:
cross-browser
highlighting
textselection
40 ответов
ОБНОВЛЕНИЕ Январь 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 */ > Selectable text.
Unselectable text.
Обратите внимание, что это нестандартная функция (т.е. не входит в какую-либо спецификацию). Не гарантируется работа везде, и в браузерах могут быть различия в реализации, и в будущем браузеры могут отказаться от поддержки.
Более подробную информацию можно найти в Документация разработчика Mozilla.
Blowsie 10 дек. 2010, в 11:13
Поделиться
Я сделал функцию автоматического определения префикса CSS;) b2bweb.fr/molokoloco/js-cssprefix
molokoloco 14 янв. 2011, в 12:13
хороший код molokoloco: D, хотя лично я бы держался подальше от его использования, так как иногда вам могут понадобиться разные значения для разных браузеров, и это зависит от JavaScript. Создание класса и добавление его к вашему элементу или применение css к вашему типу элемента в вашей таблице стилей — довольно пуленепробиваемое доказательство.
Blowsie 14 янв. 2011, в 13:07
‘user-select’ — Значения: нет | текст | переключить | элемент | элементы | все | наследовать — w3.org/TR/2000/WD-css3-userint-20000216
Blowsie 21 март 2011, в 09:44
На самом деле -o-user-select не реализован в Opera. Вместо этого он реализует невыбираемый атрибут IE.
Tim Down 03 июль 2011, в 10:52
Отличный ответ! Знаете ли вы, есть ли способ переопределить этот дочерний элемент элемента с этим стилем? Я пробовал x: text! Важный; х: авто! важно; и х: нормально! важно; но безрезультатно.
Gary 11 июль 2011, в 18:19
@Fantabulum Дети наследуют эти стили автоматически 🙂
Morteza Milani 18 авг. 2011, в 08:06
@Morteza: Это правильно, проблема ломает это наследство .
Gary 18 авг. 2011, в 13:54
извиняюсь! затем попытайтесь установить inherits:none у детей. Я не уверен, что это работает или нет. но это должно.
Morteza Milani 18 авг. 2011, в 15:28
По какой-то причине это само по себе не работало в IE8, затем я добавил
robasta 20 янв. 2012, в 08:11
Не работает на мобильный? Android-браузер по-прежнему выделяет текст (при касании) со всеми этими CSS-кодами. (В браузере рабочего стола нет (двойной щелчок или перетаскивание).) На мобильном устройстве единственный способ отключить выделение текста, по-видимому, — захват touchstart , но при этом отключается все событие click для этого элемента. Идеи?
Rudie 06 апр. 2012, в 11:10
Это работает на некоторых версиях Android, но не на всех. Из любопытства, на какую версию Android вы ссылаетесь?
Blowsie 10 апр. 2012, в 07:41
-moz-user-select должен быть установлен в -moz-none или вы не можете сбросить выбор пользователя на дочерних элементах в Firefox.
Andre Backlund 19 апр. 2012, в 16:46
@ think123: На самом деле он не такой кроссбраузерный, как вы можете себе представить: он не помогает вам в Opera или IE
Tim Down 03 авг. 2012, в 16:55
это нелепо! так много разных способов сделать одно и то же. давайте сделаем новый стандарт для пользовательских выборов. мы назовем это standard-user-select . тогда у нас не будет этих проблем. хотя для обратной совместимости мы должны включить и другие. так что теперь код становится -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none; , ах, намного лучше
Claudiu 04 сен. 2012, в 16:19
Дискуссия о специфичных для браузера приставках продолжается уже давно. Здесь не совсем подходящее место для обсуждения. Также зачем вам называть его standard-user-select когда вы можете просто назвать его user-select . На данный момент лучший способ обойти эти различия — это создавать миксины в less, sass или аналогичные.
Blowsie 05 сен. 2012, в 08:21
@Claudiu: Причина, по которой префиксные версии не сходятся в стандартном свойстве user-select заключается в том, что user-select появился в раннем черновике CSS 3, но позже был удален, предположительно потому, что его считали более связанным с поведением, чем стилем, и, следовательно, выходит за рамки CSS.
Tim Down 19 сен. 2012, в 10:54
Ответ @ rob оказался для меня билетом. Весь CSS (который у нас уже был) сделал zip в IE8.
podperson 04 окт. 2012, в 15:51
@podperson: в IE 8 есть опция не-CSS и не-JavaScript, которая является unselectable атрибутом.
Tim Down 06 окт. 2012, в 23:00
Это не работает в Opera 12.02, хотя.
Slava Fomin II 12 окт. 2012, в 13:46
@SlavaFominII: что не работает в Opera 12.02?
Tim Down 15 окт. 2012, в 21:37
@TimDown Я не могу получить ожидаемые результаты со стилями, указанными в этом ответе в моей Opera 12.02 на XUbuntu-box, и я думаю, что стоит упомянуть.
Slava Fomin II 16 окт. 2012, в 01:39
@SlavaFominII: Верно. Да, Opera не реализует собственное свойство CSS для user-select .
Tim Down 16 окт. 2012, в 08:24
Это замечательно и предотвращает любое выделение мышью, хотя, если я сделаю «Правка-> Выбрать все», оно все равно подсвечивается.
Primus202 15 март 2013, в 22:15
Bjørn Stenfeldt 17 апр. 2013, в 13:56
@BjornStenfeldt На самом деле, просто выделив и выбрав как обычно, вы выберете что-нибудь в IE 10 с вышеуказанным CSS (и 9 в этом отношении). Я должен -1 этот ответ (как это имеет значение), потому что я пришел сюда, чтобы я мог заменить устаревший атрибут «невыбираемый», но, увы, я не могу (красная волнистая линия остается, и мое движение глаз продолжается). Его CSS отлично работает для всех браузеров, кроме IE (что означает, что он либо не включил правило, либо такого правила не существует для IE 9 и 10 [не уверен насчет 8 и ниже]). В любом случае, он должен был сказать что-то об этом в своем ответе.
VoidKing 19 апр. 2013, в 15:55
@blowsie Я думаю, у 1318 зрителей (на момент написания статьи) нет клиентов, которые будут использовать IE . Как бы я ни удовлетворял это предположение, мне также трудно в это поверить. Отличная работа по другим правилам CSS. Было хорошо с вашей стороны включить -webkit-touch-callout: none; , Я бы не подумал об этом.
VoidKing 19 апр. 2013, в 16:06
@Blowie Еще одна вещь: какой смысл включать -ms-user-select: none; ? «MS» не означает Microsoft? Может быть, это правило предназначено для IE 8 и ниже?
VoidKing 19 апр. 2013, в 16:07
@VoidKing Использование префикса браузера -ms действительно работает для IE 10, а не для IE 8. Не уверен насчет IE 9.
Pluto 03 июнь 2013, в 17:17
Я бы предложил добавить cursor:default; не указывать избирательность для пользователя
Julian F. Weinert 16 июнь 2013, в 22:28
@Julian, это не так просто, как, если элемент является ссылкой или содержит ссылки?
Blowsie 17 июнь 2013, в 07:37
Используйте prefixfree.js, так что вы можете опустить все префиксы!
Anselm 23 июнь 2013, в 12:01
Это -moz-user-select: moz-none; правило не работает в последней версии Firefox 22, пожалуйста, исправьте его с правильным значением: -moz-user-select: none; (использовал его здесь: jsfiddle.net/jdNa9/3 ) Спасибо.
Stano 03 авг. 2013, в 18:22
Sass / Compass mixin делает это легко. bit.ly/1gBasVh
bergie3000 14 фев. 2014, в 00:00
В IE 11, если вы нажмете в начале «Невыбираемый текст», нажмите Shift, а затем щелкните в конце, тогда текст станет выделенным.
Claudix 07 окт. 2014, в 10:31
Internet Explorer имеет ошибку с этим кодом CSS. Если вы начнете выделение с Выбираемого текста и продолжите перетаскивать его вниз, то вы можете выделить невыбираемый текст.
Samy S.Rathore 16 фев. 2015, в 07:53
@Blowie Почему -khtml-user-select необходим? Konqueror действительно поддерживает это? Я не могу найти какую-либо документацию по этому вопросу, но тогда я никогда не использовал Konqueror.
Toothbrush 02 авг. 2015, в 18:42
@toothbrush Это для старых версий Safari (менее 2.0)
Blowsie 04 авг. 2015, в 07:35
Как упомянуто в одном из предыдущих комментариев — «Как распространяются стандарты» — xkcd.com/927
Michal Stefanow 04 авг. 2015, в 14:36
Toothbrush 05 авг. 2015, в 12:48
Я могу выбрать невыбираемый текст в примере, который вы предоставили (IE 11, Windows 8.1) на сенсорном ноутбуке, дважды нажав на текст. Есть ли способ предотвратить такое поведение?
ChocolateAndCheese 01 сен. 2015, в 22:30
NoOneIsHere 20 июнь 2016, в 17:24
user-select: none; Кажется, сейчас работает в Chrome. Достаточно хорошо для меня.
Elad Nava 01 дек. 2016, в 13:55
Жалкий. Эта функция доступна во Flash начиная с AS1 уже почти два десятилетия. help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/… Так много для стандартов.
Triynko 30 янв. 2017, в 19:28
Везде, где я читаю, говорится, что user-select: none не поддерживается в последнем Firefox (февраль 2017), но это не так. Инструменты dev вычеркивают это с сообщением «неверное значение свойства». Мне все еще нужно использовать -moz-user-select: none чтобы работать без выделения.
BlueRaja — Danny Pflughoeft 06 фев. 2017, в 18:14
Не могли бы вы добавить, используете ли body < /* . etc */ user-select: none; >будет хорошо работать. Или html < /* . etc */ user-select: none; >
太極者無極而生 14 дек. 2017, в 04:55
Это не работает с contenteditable div.
mbomb007 21 март 2018, в 16:14
@Claudiu Причина использования префиксов поставщиков заключается в том, что они могут иметь различия в реализации. В случае user-select , например, наследование абсолютно позиционированных элементов реализуется непоследовательно. Но я согласен, что осторожное использование подстановочного знака для всех префиксов могло бы быть полезным для читабельности кода.
Yeti 19 сен. 2018, в 09:42
@codespy откат, так как вопрос требует правильного решения CSS
Blowsie 31 окт. 2018, в 15:03
кажется, интернет-исследователь хочет умереть со всеми этими новыми технологиями отстающих
Webwoman 21 янв. 2019, в 16:16
Показать ещё 47 комментариев
В большинстве браузеров это может быть достигнуто с использованием собственных свойств свойства CSS user-select , изначально предложенных, а затем оставленных в CSS3 и теперь предложенный в CSS UI Level 4:
*.unselectable < -moz-user-select: 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; >К сожалению, это свойство не наследуется, то есть вам нужно поместить атрибут в начальный тег каждого элемента внутри . Если это проблема, вы можете вместо этого использовать 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")); Обновление 30 апреля 2014 г.. Этот обход дерева должен быть повторно запущен всякий раз, когда новый элемент добавляется к дереву, но, похоже, из комментария @Han можно избежать этого от добавление обработчика событий mousedown , который устанавливает unselectable в цель события. Подробнее см. http://jsbin.com/yagekiji/1.
Это все еще не охватывает все возможности. Хотя невозможно инициировать выбор в неэлектируемых элементах, в некоторых браузерах (например, в IE и Firefox) все еще невозможно предотвратить выбор, который начинается до и после невыбранного элемента, не делая весь документ невыбираемым.
Tim Down 05 дек. 2010, в 12:05
Поделиться
Вы должны удалить селектор * из вашего примера, он действительно неэффективен, и в действительности нет необходимости использовать его в вашем примере?
Blowsie 14 янв. 2011, в 13:15
@Blowie: я так не думаю: спецификация CSS 2 гласит, что *.foo и .foo точно эквивалентны (во втором случае подразумевается универсальный селектор ( * )), поэтому, исключая причуды браузера, я не могу обратите внимание, что в том числе * повредит производительность. Моя давняя привычка включать * , который я изначально начал делать для удобства чтения: он однозначно утверждает, что автор намеревается сопоставить все элементы.
Tim Down 14 янв. 2011, в 13:24
оооо после некоторого дальнейшего чтения кажется * неэффективным только при использовании его в качестве ключа (самый правый селектор), т.е. .unselectable *. Дополнительная информация здесь code.google.com/speed/page-speed/docs/…
Blowsie 14 янв. 2011, в 13:49
Атрибут unselectable не работает в IE 9
Ian Hunter 27 июль 2011, в 21:41
@beanland: я не могу проверить это прямо сейчас, но я был бы удивлен, если бы это было так.
Tim Down 27 июль 2011, в 22:42
@beanland: я протестировал unselectable атрибут в IE 9, и он отлично работает.
Tim Down 06 сен. 2011, в 14:27
Вместо использования просто используйте селектор атрибута [unselectable = «on»]
Chris Calo 26 янв. 2012, в 19:39
@ChristopherJamesCalo: Да, это вариант. Я сопротивлялся этому, потому что добавление атрибута unselectable делает ваш HTML недействительным, а селектор атрибута не будет работать с узлами, которые не могут быть выбраны с помощью свойства unselectable в JavaScript.
Tim Down 26 янв. 2012, в 23:17
Пожалуйста, удалите селектор * .
Francisc 24 апр. 2012, в 20:02
.className получает все элементы с заданным именем класса. Добавление селектора * скажет ему снова искать это имя класса во всех элементах DOM на странице. Это необходимо и медленно.
Francisc 25 апр. 2012, в 08:35
@Francisc: Нет. Как я сказал Blowie ранее в комментариях, это точно не имеет значения.
Tim Down 25 апр. 2012, в 09:32
Браузеры анализируют CSS справа налево. Если они достаточно умны, чтобы игнорировать *.className , отлично, но зачем полагаться на это? Ты не можешь знать. Это дополнительная специфика и излишняя. Я не вижу разницы между тем, что вы сделали, и html body .className который снова не нужен. Если вы хотите повысить специфичность для этого конкретного случая (не каждый раз), просто используйте !important потому что вы всегда хотите, чтобы элементы с этим классом не были выбираемыми.
Francisc 25 апр. 2012, в 17:22
@ Франциск: Это не более или менее конкретно. Прочитайте спецификацию: * подразумевается, если опущен. Я объяснил свою причину для включения его ранее в комментариях, что я нашел полезным в прошлом, чтобы напомнить себе, что я намерен сопоставить все элементы. Я, конечно, не говорю, что все должны это делать. Точно так же он не приносит активного вреда.
Tim Down 25 апр. 2012, в 17:42
Вы правы, у селектора * нет никакой специфики, я был неправ. Я до сих пор не уверен, что браузеры не анализируют элементы дважды.
Francisc 25 апр. 2012, в 20:32
@Francisc: я был бы очень удивлен, если бы они сделали. Я ожидаю, что любая разница исчезнет на этапе анализа селектора, а не на этапе сопоставления.
Tim Down 25 апр. 2012, в 23:17
@beanland: Оказывается, вы были правы: только в стандартном режиме вам нужно использовать setAttribute(«unselectable», «on») в IE 9. Я обновил свой ответ.
Tim Down 22 июль 2012, в 16:04
@Francisc: я не верю, что разбор RTL применяется при оценке простых селекторов в простой последовательности селекторов. Это просто не имеет никакого смысла. Даже если браузеры как — то разобрать *.className дважды, то .className должен быть дважды разобран, а для того , чтобы соответствовать спецификации (подразумеваемая * придется искать все элементы, а). Затем вы получаете тот же гипотетический удар по производительности, который побеждает цель удаления * в первую очередь. В чем смысл?
BoltClock♦ 05 авг. 2012, в 16:50
Если браузеры выполняют разбор RTL для каждого вида правил, будет разница. С * он будет искать все элементы .className , затем снова фильтровать элементы, которые соответствуют * которые также имеют этот класс. Без * он просто будет искать все элементы с .className . Но, опять же, я не знаю, достаточно ли умны (все) браузеры, чтобы не анализировать одинаковые элементы в случае *.className .
Francisc 07 авг. 2012, в 21:48
@Francisc: Я был бы очень удивлен , если любой браузер действовал на .className части x.className без разбора x , а также. Без разбора всего селектора он не может иметь представления о контексте селектора класса, и было бы очевидно крайне неэффективно искать весь документ без необходимости.
Tim Down 07 авг. 2012, в 22:32
Элемент всегда будет соответствовать * без вопросов. Попытка подойти к нему только приведет к потере времени браузера, независимо от того, есть он там или нет, поэтому выбор его размещения по сути является чисто стилистическим и по вкусу автора. Впрочем, какой смысл обсуждать все это?
BoltClock♦ 21 авг. 2012, в 08:24
Можете ли вы рассказать о «предложенном, но ныне несуществующем»?
Kos 10 окт. 2012, в 16:26
@Kos: Ссылка на древний черновик 2000 года предложения по части CSS 3, «Пользовательский интерфейс для CSS3». Я считаю, что спецификация была заменена спецификацией пользовательского интерфейса CSS3 , которая не упоминает о user-select . Я предполагаю, что есть архивы списков рассылки, содержащие обсуждения о его удалении где-то в Интернете, но я не смог их найти.
Tim Down 10 окт. 2012, в 17:31
@TimDown @Francisc Я думаю, что он говорит о * .className вместо *.className . Первый может быть медленным, в зависимости от реализации, потому что это означает match all elements and for each element, look for all instances of the class regardless of tag name . Вторая реализация означает look for all instances of this class regardless of the tag name которое эквивалентно .className . Если реализация достаточно умная, разница должна быть незначительной. В худшем случае он проходит через весь документ дважды, причем первый проход бесполезен.
Mel 14 июнь 2013, в 10:25
@TimDown: получается, что вместо полноценного обхода дерева, который не будет работать, если впоследствии будут вставлены какие-либо элементы-потомки, вы можете просто установить unselectable на event.target mousedown : jsbin.com/yagekiji/1
Han Seoul-Oh 30 апр. 2014, в 19:38
@ Хан: Отличное исследование. Вам нужно немного дополнительного кода для людей, не использующих jQuery, поскольку target и preventDefault() не поддерживаются для событий в IE
Tim Down 30 апр. 2014, в 23:12
@TimDown Вовсе нет, это все, на что я надеялся. Я не знал о .srcElement / .returnValue , я думаю, что у меня было защищенное детство благодаря jQuery, TIL!
Han Seoul-Oh 15 май 2014, в 20:13
Я поддерживаю этот ответ, потому что на конце нет никаких раздражающих комментариев, которые можно удалить после копирования / вставки, как в ответе выше.
James Douglas 22 фев. 2019, в 19:26
Показать ещё 25 комментариев
Пока не появится свойство CSS 3 user-select, Gecko основанные браузеры поддерживают свойство -moz-user-select , которое вы уже нашли. WebKit, а браузеры на основе blink поддерживают свойство -webkit-user-select .
Это, конечно, не поддерживается в браузерах, которые не используют движок рендеринга Gecko.
Нет никакого «стандартного» совместимого быстрого и простого способа сделать это; использование JavaScript — это вариант.
Реальный вопрос: почему вы хотите, чтобы пользователи не могли выделить и, предположительно, скопировать и вставить определенные элементы? Я не встречал ни одного раза, что я не хотел, чтобы пользователи выделяли определенную часть моего веб-сайта. Некоторые из моих друзей, потратив много часов на чтение и письмо, будут использовать функцию выделения, чтобы запомнить, где на странице они были, или предоставить маркер, чтобы их глаза знали, где искать дальше.
Единственное место, где я мог видеть, что это полезно, — это если у вас есть кнопки для форм, которые не должны копироваться и вставляться, если пользователь копирует и вставляет веб-сайт.
Отключение выделения текста, вырезания, копирования и щелчка правой кнопкой мыши на странице с помощью jQuery и JavaScript
В этом посте мы обсудим, как остановить кражу контента с вашего веб-сайта, просто отключив выделение текста, вырезание, копирование и щелчок правой кнопкой мыши с помощью мыши и клавиатуры. Мы также расскажем, как можно зашифровать HTML, чтобы исходный код был доступен для чтения только браузерам.
1. Отключить выделение текста с помощью JavaScript/jQuery
Вы можете использовать следующий код, чтобы предотвратить выделение текста (и, следовательно, копирование-вырезание) внутри тега body или div. Он в основном переопределяет поведение браузера по умолчанию на onmousedown а также onselectstart мероприятие.
JS
Если вы хотите разрешить выделение текста, но при этом предотвратить копирование, используйте следующий код. Вы также можете использовать jQuery bind() чтобы добиться того же, указав события вырезания и копирования, которые запускаются, когда пользователь вырезает или копирует текст.
JS
jQuery
$ ( document ) . ready ( function ( ) < $ ( 'body' ) . bind ( 'cut copy' , function ( e ) < e . preventDefault ( ) ;
2. Отключить выделение текста с помощью CSS
The user-select Свойство указывает, где пользователи могут выбирать текст внутри элемента. Если установлено значение none, выбор не начинается с этого элемента. Вы можете использовать это свойство и применить его к тег, чтобы предотвратить выделение текста.
CSS
/* Предотвратить выделение текста
элемент во всех основных браузерах */— youbkit — touch — callout : none ; /* Сафари для iOS */
— youbkit — user — select : none ; /* Chrome 6.0+, Safari 3.1+, Edge и Opera 15+ */
— moz — user — select : none ; /* Fire Fox */
— ms — user — select : none ; /* IE 10+ и Edge */
user — select : none ; /* Версия без префикса,
в настоящее время поддерживается Chrome и Opera */
Вместо того, чтобы применять эти свойства ко всему телу, вы можете переместить их в класс и применить к элементам, выбор которых вы хотите отключить.
3. Отключить правый клик:
Вы можете использовать следующий код, чтобы предотвратить щелчок правой кнопкой мыши на любой странице. Идея состоит в том, чтобы захватить onContextMenu событие и вернуть false в обработчике события. Это заблокирует любой доступ к контекстному меню с помощью щелчка правой кнопкой мыши, а также с клавиатуры.
JS
document . oncontextmenu = new Function ( «return false;» ) ;
jQuery
$ ( document ) . ready ( function ( ) < $ ( "body" ) . on ( "contextmenu" , function ( e ) < return false ;
4. Шифрование HTML:
Все вышеупомянутые методы будут работать нормально, но ваш исходный код HTML по-прежнему уязвим. Вы можете предотвратить кражу исходного кода другими, используя это Инструмент для шифрования HTML.
Шифрование HTML преобразует содержимое вашей веб-страницы в непростой для понимания формат. Это может в значительной степени защитить ваш код от кражи другими. Единственное ограничение заключается в том, что вы увидите свою страницу только в браузерах с поддержкой JavaScript.
Это все об отключении выделения текста, вырезании, копировании и щелчке правой кнопкой мыши на странице.
Оценить этот пост
Средний рейтинг 4.35 /5. Подсчет голосов: 43
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?