Comments 69
Спасибо за хорошую статью.
Ммм ... а проще было бы накрыть текст каким-нибудь дивом и дать ему z-index чуть больше, чем у прошлого ? :)
А как же нажатие на элементы (кнопки, ссылки etc), эффект наведения (hover) etc?
Данный скрипт всего лишь не дает выделять текст который не нужно никогда выделять, например, подписи к полям, заголовки колонок таблицы и т.п. Я об этом написал в начале статьи. Защищать текст от копирования никто не собирался.
Данный скрипт всего лишь не дает выделять текст который не нужно никогда выделять, например, подписи к полям, заголовки колонок таблицы и т.п. Я об этом написал в начале статьи. Защищать текст от копирования никто не собирался.
Здесь тоже просто, кнопкам и ссылкам дать z-index ещё больше, тогда они будут поверх накрывающего дива.
Очень интересно как вы это сделаете кроссбраузерно, особенно в IE. Я как то пытался сделать подобное (совсем не для обсуждаемой задачи) почти везде работало, кроме IE.
К тому же логика верстки настолько усложняет, что мама не горюй.
К тому же логика верстки настолько усложняет, что мама не горюй.
а еще в IE таким эффектом обладает position:absolute, правда, не везде применим.
Вот только у ИЕ дивы как-бы прозрачно-виртуальные, чтоли... В общем если просто сверху наложить див пустой, то ИЕ будет считать, что его и нету)
А вот если в него прозрачный гиф положить... тогда опять таки не будет навигации никакой (особый изврат - на прозрачном гифе мапы расставить над ссылочки/кнопочками и повесить на них какие-либо события=))
А вот если в него прозрачный гиф положить... тогда опять таки не будет навигации никакой (особый изврат - на прозрачном гифе мапы расставить над ссылочки/кнопочками и повесить на них какие-либо события=))
Если интуитивная реакция браузера на распространенные действия пользователя мешает интерфейсу, нафег такой интерфейс :)
Вот вам примеры:
1. Некоторый текст, двойной клик по абзацу (параграфу) дает возможность его отредактировать (появляется окно с текстом для редактирования, или сам абзац заменяется TEXTAREA). К примеру в Opera это сделать невозможно (там нельзя перехватить dblclick), интуитивная реакция браузера в даном моменте никому не нужна.
2. Drag&Drop. Вы начинаете тащить элемент. Под курсором таскается копия перетаскиваемого элемента, при этом текст на странице начинает выделяться, реагируя на движения мыши (как будто вы просто выделяете текст), что не очень приятно.
3. Вы хотите выделить несколько строк в таблице. Нажимаете кнопку мыши, начинаете тащить, рисуется рамка выделения. После отпускания строки под рамкой выделяются. Но если вы начнете выделять рамкой нажав на текст, то текст таблицы тоже будет выделяться что в данном случае совсем не нужно.
и т.д. и т.п.
1. Некоторый текст, двойной клик по абзацу (параграфу) дает возможность его отредактировать (появляется окно с текстом для редактирования, или сам абзац заменяется TEXTAREA). К примеру в Opera это сделать невозможно (там нельзя перехватить dblclick), интуитивная реакция браузера в даном моменте никому не нужна.
2. Drag&Drop. Вы начинаете тащить элемент. Под курсором таскается копия перетаскиваемого элемента, при этом текст на странице начинает выделяться, реагируя на движения мыши (как будто вы просто выделяете текст), что не очень приятно.
3. Вы хотите выделить несколько строк в таблице. Нажимаете кнопку мыши, начинаете тащить, рисуется рамка выделения. После отпускания строки под рамкой выделяются. Но если вы начнете выделять рамкой нажав на текст, то текст таблицы тоже будет выделяться что в данном случае совсем не нужно.
и т.д. и т.п.
При тестировании. Когда время ограничено, усложнить возможность копирования вопроса в поиск.
Удивительно, но факт. livejournal.com позволяет выделить текст во всех браузерах кроме оперы.
Есть еще режим каретки, когда Shift + стрелки действует как в текстоввых редакторах, выделяя текст. Режим, конечно, включается отдельно, но тогда уж стоит бороться и с ним, раз уж вы с Ctrl+A боретесь.
В целом я одобряю ваши исследования и мотивацию, заявленную в статье.
Ctrl+A скорее лишнее :)
В основном борьба направлена на выделение текста мышью, когда оно не нужно. То есть вместо выделения пользователю предоставляется некоторая другая функциональность, к примеру Drag&Drop или действие на двойной клик.
Есть еще задумки, чтобы выделяя текст выделялись только некоторые текстовые узлы. То есть не выделялись узлы которые не несут информационной нагрузки, к примеру, примеры заполнения полей формы или комментарии к полям, а остальные попадали в выделение.
В основном борьба направлена на выделение текста мышью, когда оно не нужно. То есть вместо выделения пользователю предоставляется некоторая другая функциональность, к примеру Drag&Drop или действие на двойной клик.
Есть еще задумки, чтобы выделяя текст выделялись только некоторые текстовые узлы. То есть не выделялись узлы которые не несут информационной нагрузки, к примеру, примеры заполнения полей формы или комментарии к полям, а остальные попадали в выделение.
А зачем пользователям запрещать выделять текст на сайте?
А нельзя ли обойти все Ваши рецепты банально отключив javascript в браузере.
В Опере по-моему(если мне не изменяет память) можно даже задать свой css для отображаения сайта
А нельзя ли обойти все Ваши рецепты банально отключив javascript в браузере.
В Опере по-моему(если мне не изменяет память) можно даже задать свой css для отображаения сайта
Пожалуйста, читайте внимательней:
Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
За статью спасибо, хорошая, но согласитесь, действует лиш на человека который не способен отключить яваскрипт в браузере :)
А вообще, за целые сайты где например запрещенно выделение текста, или клик правой клавишей, я бы отрывал админам и вебмастерам таких сайтов руки. Так как видимо ставя защиту на правый клик, они не задумываются о том что может мне надо открыть линк в новом окне (Хот кей, типа ctrl+клик как в FF, или ctrl+shift+клик как в Opera не в счет :) )
А вообще, за целые сайты где например запрещенно выделение текста, или клик правой клавишей, я бы отрывал админам и вебмастерам таких сайтов руки. Так как видимо ставя защиту на правый клик, они не задумываются о том что может мне надо открыть линк в новом окне (Хот кей, типа ctrl+клик как в FF, или ctrl+shift+клик как в Opera не в счет :) )
Елки палки. Ну не путайте сайт с веб-приложением. Ajax и все такое без JS не работают. Попробуйте тот же Google Maps без JS.
А насчет запрета правого клика и т.п. согласен, но вы говорите про сайты. А данный код направлен только на веб-приложения.
А насчет запрета правого клика и т.п. согласен, но вы говорите про сайты. А данный код направлен только на веб-приложения.
читайте коммент выше :)
Все эти защиты — от лохов, не более.
Использовать свою CSS можно в большинстве браузеров в Opera, FireFox, Internet Explorer. В некоторых только для всех сразу (как в IE). В некоторых можно и свои JS использовать.
Только часто ли вы используете дополнительные CSS/JS в различного рода почтовых веб-клиентах, и других сервисах (Google Maps и т.п.). Есть всякие надстройки для популярных приложений, которые прячут ненужное, или добавляют доп. фишки, но основную суть оставляют (потому что они слишком сложно организованы, чтобы вмешиваться в их работу).
К тому же, еще раз повторяюсь, тут смысл не в том как насолить пользователю, а в обратном. В веб-приложениях выделение текста часто мешает работе некоторой функциональности.
Только часто ли вы используете дополнительные CSS/JS в различного рода почтовых веб-клиентах, и других сервисах (Google Maps и т.п.). Есть всякие надстройки для популярных приложений, которые прячут ненужное, или добавляют доп. фишки, но основную суть оставляют (потому что они слишком сложно организованы, чтобы вмешиваться в их работу).
К тому же, еще раз повторяюсь, тут смысл не в том как насолить пользователю, а в обратном. В веб-приложениях выделение текста часто мешает работе некоторой функциональности.
Я как то накрыл такой текст прозрачным гифом, но целиком вся бадяга всеравно выделяется.
Неправильная постановка задачи...
Контент который такими способами защищают нужен лишь пользователям которые списки файлов по майкрософтовски делают - PrintScreen. Перехватите ?
Контент который такими способами защищают нужен лишь пользователям которые списки файлов по майкрософтовски делают - PrintScreen. Перехватите ?
трындец... вы читать умеете? какой перехват???
Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
1
2
3
4
Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
1
2
3
4
форматирование и ссылки пропали, но я не поленюсь еще раз дать:
http://habrahabr.ru/blog/webdev/33130.html#comment573130
http://habrahabr.ru/blog/webdev/33130.html#comment573139
http://habrahabr.ru/blog/webdev/33130.html#comment573162
http://habrahabr.ru/blog/webdev/33130.html#comment573192
перечитайте, это русский язык, не сложно.
http://habrahabr.ru/blog/webdev/33130.html#comment573130
http://habrahabr.ru/blog/webdev/33130.html#comment573139
http://habrahabr.ru/blog/webdev/33130.html#comment573162
http://habrahabr.ru/blog/webdev/33130.html#comment573192
перечитайте, это русский язык, не сложно.
тот кто захочет скопировать возьмет из исходников :) для остальных достаточно даже просто отключить джаваскрипт
Большее спасибо за статью! Плюсую.
DRM для браузеров? O_o ;) Да ладно, DRM не существует в принципе, любая защита обходиться достаточно подготовленным пользователем. А обычные пользователи столкнуться только с проблемами. Например, если мы защитим статью от копирования таким DRM, то владельцы чужих сайтов легко скопируют прямо из HTML-кода, а обычные _ваши_ читатели не смогут скопировать длинное имя организации, чтобы поискать о нём в Интернете.
А за саму статью, в техническом плане, спасибо :)
А за саму статью, в техническом плане, спасибо :)
Да скока вас, перечитайте первый абзац, срочно!
Это не дрм а развитие "идей" самизнеетекого, эти имбицылы действительно думают что запретив копировть говонотекст подобным себе обретут идивидуальность. В производстве этого говнотекста.
Блять вообще чего это я поцанам реальным обьясняю.. Щаз "насрут" опять в "карму" гыгыгыгы адинадин
Блять вообще чего это я поцанам реальным обьясняю.. Щаз "насрут" опять в "карму" гыгыгыгы адинадин
очень интересная и полезная статья!
Наверное, многого прошу слишком. Но итоговый листинг кода, готового к употреблению, был бы очень полезен :)
Нихрена себе вы тут наваяли (я извиняюсь за выражение)!
Во-первых Ctrl+A запрещать не стоит. Иногда надо-таки выделить и скопировать. Для закрывания текста от случайных щелчков мышью можно
а) сделать интерфейс картинкой (дополнительные возможности оформления и вёрстки)
б) навесить поверх слой с прозрачным гифом.
в) вообще нужно делать грамотный интерфейс и тогда задача что-то закрыть от выделения стоять не будет.
Во-первых Ctrl+A запрещать не стоит. Иногда надо-таки выделить и скопировать. Для закрывания текста от случайных щелчков мышью можно
а) сделать интерфейс картинкой (дополнительные возможности оформления и вёрстки)
б) навесить поверх слой с прозрачным гифом.
в) вообще нужно делать грамотный интерфейс и тогда задача что-то закрыть от выделения стоять не будет.
Очень не люблю, когда блокируется или отключается базовая функциональность браузера (выделение текста, констекстное меню, главное меню и панель управления) или javascript-ом изменяются размеры или координаты окна - руки бы поотрывал.
Обычно так пытаются защитить текст от копирования — жалкие попытки, только мешающие честным пользователям (например, я люблю выделять мышкой текст во время чтения, а иногда без этого не обойтись, если разработчику взбрело в голову установить чёрный фон, а при включении пользовательского стиля дизайн расползается до нечитаемого состояния) и никак не препятствующие украсть текст тому, кому это действительно нужно.
Некоторые "веб-дизайнеры" любят изменять размеры окна и удалять главное меню и панель инструментов — вероятно они не допускают мысли, что их сайт открывают не в отдельном окне, а в семнадцатой по счёту вкладке браузера.
К счастью, Firebug и знание основ html/css/javascript позволяют отключать такие запреты. Для некоторых сайтов с подобными блокировками у меня уже есть букмарки с javascript-кодом для блокировки таких блокировок :)
не дает выделять текст который не нужно никогда выделять, например, подписи к полям, заголовки колонок таблицыУ некоторых разработчиков нередки проблемы с самоидентификацией — они ошибочно считают, что они — люди имеющие право решать, что пользователю браузера можно и нужно, а что нет :) Пользуясь браузером я расчитываю на его проверенную временем функциональность — может быть, я хочу погуглить или перевести на другой язык, или послать по аське как раз этот кусочек текста, который разработчик вдруг запретил к выделению.
Обычно так пытаются защитить текст от копирования — жалкие попытки, только мешающие честным пользователям (например, я люблю выделять мышкой текст во время чтения, а иногда без этого не обойтись, если разработчику взбрело в голову установить чёрный фон, а при включении пользовательского стиля дизайн расползается до нечитаемого состояния) и никак не препятствующие украсть текст тому, кому это действительно нужно.
Некоторые "веб-дизайнеры" любят изменять размеры окна и удалять главное меню и панель инструментов — вероятно они не допускают мысли, что их сайт открывают не в отдельном окне, а в семнадцатой по счёту вкладке браузера.
К счастью, Firebug и знание основ html/css/javascript позволяют отключать такие запреты. Для некоторых сайтов с подобными блокировками у меня уже есть букмарки с javascript-кодом для блокировки таких блокировок :)
И, хотя тот же Гугл разницу между десктопными и браузерными приложениями сводит на нет, и в его качественно реализованных веб-приложениях такое изменение стандартного интерфейса сделано очень гармонично и интуитивно понятно, хотелось бы иногда сохранить возможность пользоваться "родной" функциональностью браузера, например, вызывать контекстное меню браузера для доступа к стандартным функциям и плагинам или выделять "невыделяемый" текст, когда хочешь скопировать в буфер обмена длинное имя документа в Google Docs без его открытия (виндовская комбинация "тык мышью, F2, ctrl+c" не действует, а открываются гуглодоки через GPRS чертовски медленно, а для некоторых ещё и дорого) — через какую-нибудь комбинацию клавиш или магическую кнопку "native behaviour" или что-то в этом роде.
Спасибо за статью и приведённое решение.
Все крайне положительно, но все таки существует масса ситуаций когда выделение не желательно.(драг=анд-дроп в том числе)
поэтому не стоит начинать холи-вар, выделение это одно, а специфические ситуации это одно.
Кстати в большинстве случев блокирование селекшена ( череез onSelectStart and onMouseDown ) более чем достаточно. если кто то готов использовать ctrl-a - он сам себе злобный буратино
поэтому не стоит начинать холи-вар, выделение это одно, а специфические ситуации это одно.
Кстати в большинстве случев блокирование селекшена ( череез onSelectStart and onMouseDown ) более чем достаточно. если кто то готов использовать ctrl-a - он сам себе злобный буратино
Еще один невнимательный читатель :)
Я знаю, что многие программисты, особенно начинающие, считают что если есть такая возможность, к примеру, запретить контекстное меню, то значит нужно ей воспользоваться (с мыслями, я защищаю свой код или все равно оно никому не нужно). Но подумайте, что лучше сделать так, как делают в некоторых почтовых веб клиентах, что по вызову контекстного меню на письме (в списке писем) выпадало меню с действиями по этому письму (ответить, переслать, удалить, а может быть так же скопировать адрес отправителя, тему письма и т.п.) или стандартное которое тут скорее ни к чему. Другое решение ткнуть в письмо, тем самым его выделив, потом ищем кнопки с действиями, потому что браузер (на данный момент, из известных мне, только опера) не дает мне сделать свое меню. К тому же первый вариант можно докрутить таким образом, что если есть выделенный фрагмент текста на странице, то не вмешиваться и показывать стандартное меню. Что в этом плохого? Улучшаем юзабилити и только. С другой стороны в руках мало квалифицированного программиста, возможность перебить контекстное меню может быть большим злом. В итоге страдают все :(
И потом вот вы говорите "они ошибочно считают, что они — люди имеющие право решать, что пользователю браузера можно и нужно, а что нет", вот вы правы в том, что не все знают что такое хороший сайт/приложение и как их делать, потому ляпают как попало. Но почему Опера решает за меня что я могу сделать на СВОЕМ сайте и что я не могу. По сути это решают те программисты, которые ее писали. Событие contextmenu не является стандартом, это придумали в MS, но другие браузеры (например, FF и Safari) тоже внедрили это у себя. Опера - нет, имеют право, по идее. Но потом делают хак для сайтов где это используется, чтобы там контекстное меню работало (функция fakeOncontextmenu в browser.js). Это как? Здесь можно использовать, здесь нельзя? И почему тогда в Опера это решают, а не решает это разработчик?
Это мне напоминает ситуацию с IE7, когда они наконец реализовали полную поддержку CSS1. Но не стали поддерживать text-decoration: blink, и только потому, что они (!) считаю это злом. В итоге это единственный браузер где это не поддерживается, и blink мы делаем через JS. Конечно это не самая нужная функция, но опять кто-то решает за других.
Браузеры сейчас стараются быть более похожими друг на друга в моменте обработки HTML/CSS/DOM/JS etc. Но только не Опера. После того как несколько лет копировала поведение IE, напрочь отказалась от этого, выкинула все плохое и, в том числе, хорошее. Я понимаю, у нее своя линия, свой путь. Но "договориться" с ней бывает очень сложно, или даже невозможно. Для информационных сайтов идеальный браузер, для веб-приложений хуже некуда. Видимо из-за этого новый Mail Yahoo отказывается в ней работать.
Я знаю, что многие программисты, особенно начинающие, считают что если есть такая возможность, к примеру, запретить контекстное меню, то значит нужно ей воспользоваться (с мыслями, я защищаю свой код или все равно оно никому не нужно). Но подумайте, что лучше сделать так, как делают в некоторых почтовых веб клиентах, что по вызову контекстного меню на письме (в списке писем) выпадало меню с действиями по этому письму (ответить, переслать, удалить, а может быть так же скопировать адрес отправителя, тему письма и т.п.) или стандартное которое тут скорее ни к чему. Другое решение ткнуть в письмо, тем самым его выделив, потом ищем кнопки с действиями, потому что браузер (на данный момент, из известных мне, только опера) не дает мне сделать свое меню. К тому же первый вариант можно докрутить таким образом, что если есть выделенный фрагмент текста на странице, то не вмешиваться и показывать стандартное меню. Что в этом плохого? Улучшаем юзабилити и только. С другой стороны в руках мало квалифицированного программиста, возможность перебить контекстное меню может быть большим злом. В итоге страдают все :(
И потом вот вы говорите "они ошибочно считают, что они — люди имеющие право решать, что пользователю браузера можно и нужно, а что нет", вот вы правы в том, что не все знают что такое хороший сайт/приложение и как их делать, потому ляпают как попало. Но почему Опера решает за меня что я могу сделать на СВОЕМ сайте и что я не могу. По сути это решают те программисты, которые ее писали. Событие contextmenu не является стандартом, это придумали в MS, но другие браузеры (например, FF и Safari) тоже внедрили это у себя. Опера - нет, имеют право, по идее. Но потом делают хак для сайтов где это используется, чтобы там контекстное меню работало (функция fakeOncontextmenu в browser.js). Это как? Здесь можно использовать, здесь нельзя? И почему тогда в Опера это решают, а не решает это разработчик?
Это мне напоминает ситуацию с IE7, когда они наконец реализовали полную поддержку CSS1. Но не стали поддерживать text-decoration: blink, и только потому, что они (!) считаю это злом. В итоге это единственный браузер где это не поддерживается, и blink мы делаем через JS. Конечно это не самая нужная функция, но опять кто-то решает за других.
Браузеры сейчас стараются быть более похожими друг на друга в моменте обработки HTML/CSS/DOM/JS etc. Но только не Опера. После того как несколько лет копировала поведение IE, напрочь отказалась от этого, выкинула все плохое и, в том числе, хорошее. Я понимаю, у нее своя линия, свой путь. Но "договориться" с ней бывает очень сложно, или даже невозможно. Для информационных сайтов идеальный браузер, для веб-приложений хуже некуда. Видимо из-за этого новый Mail Yahoo отказывается в ней работать.
спасибо за основательный подход! мало кто держал бы контрол-А несколько секунд для того, чтобы проверить и сообщать нам что будет. мог бы - плюсовал бы карму.
В Gecko браузерах также есть режим перемещения по документу курсором, включаемый по F7, такой фишки нет ни в Opera ни в IE
Про закрытие при помощи CSS свойства в FireFox... К FireFox есть плагины позволяющие отключить на странице CSS. Так что если текст нужен - то было бы желание.
Заметил у этого метода небольшой баг - если выбрать из меню браузера "Выделить все", то все выделяется, тестировалось на Firefox
Отличная статья - отлично пригодилось! То, что надо! :)
Спасибо!
Спасибо!
Вы писали как вызывать функцию. Но у меня возникли проблемы… Я вызываю с помощью onmouseover. Но тогда выделяется все оставшееся поле. Как мне сделать, чтобы запрещалось выделять только определенный элемент. Или как закрывать функцию, если использовать onmouseout?
Спасибо! Пользуюсь.
Спасибо тебе, добрый человек =)
Для Crome в варианте со стилями надо добавить
-webkit-user-select: none;
-webkit-user-select: none;
К сожалению решение со скриптом глючит в ИЕ — при определенных обстоятельствах текст можно на короткий момент выделить и когда скрипт снимает выделение командой document.selection.clear(); то выделенный текст просто удаляется.
А как такое поведение запретить самим сайтам? есть какие нибудь плагины которые выключают все эти user-select: none; ???
Sign up to leave a comment.
Как запретить браузеру выделять текст