Как запретить выделять текст css

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Уроки и статьи

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт

Мой аккаунт Моя группа

Какая тема Вас интересует больше?

Бесплатный курс

Мастер-класс по созданию сайта на WordPress 6

Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить — не составит труда!

Чтобы получить Видеокурс,
заполните форму

Бесплатный онлайн-семинар

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Как запретить выделение/копирование изображения | HTML

Есть скрипты, которые блокируют правую кнопку мышки, в результате чего нельзя вызвать контекстное меню, если нажать на фото. На CSS можно сделать более элегантное решение: в всплывающем контекстном меню не будет пункта «Сохранить изображение как. «.

Юрий Гагарин

style="pointer-events: none;">

или для всех изображений сайта

ВНИМАНИЕ: картинка легко скачивается из исходного кода страницы. Серьёзно предполагать, что подобными методами (JavaScript или CSS) можно удержать плагиаторов, нельзя.

Как запретить выделение изображения

Юрий Гагарин

style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;">

Я обычно объединяю оба способа для создания, например, такой фотогалереи

18 комментариев:

Иван На вордпрессе тоже есть даже плагин, который выключает правую кнопку мышки, не дает простым способом скопировать фото и текст. Но к сожалению это только простой способ. А скопировать можно другими способами. Это не проблема кто хочет скопировать. NMitra Совершенно верно. Отключение JavaScript даёт доступ к коду, а дальше всё очень просто. Программам даже это делать не нужно, мало какие скрипты видят ту же картинку, что и браузеры. В них просто не заложена поддержка всех свойств CSS, JavaScript.

Эти свойства, конечно, были придуманы для другого. Я сейчас плотно подсела на сочетание pointer-events с user-select и focus. Точно также, как когда-то на :checked. Огорчает только Опера Мини. Rinat Urmancheev К сожалению, способы не подходят для многих IE (goo.gl/SgHlwy, goo.gl/lyBddg). Мне кажется, об этом стоит упомянуть в сообщении 🙂 NMitra Ринат, дело в том, что здесь я не описываю работу конкретного свойства, как, например, тут http://css-tricks.com/almanac/properties/p/pointer-events/ , а даю способы решения конкретной задачи. Было бы, например, странно, если бы я в статье про «таб-вкладки» http://shpargalkablog.ru/2012/03/css-tabs.html давала бы описание каждого отдельного свойства. То же самое и тут.

Да и не справочник у меня, а блог. Справочник в Рунете уже есть и довольно не плохой и удобный в использовании http://htmlbook.ru/ . Англоязычный мне нравится у Мозилы https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events , во-первых, из первых рук, во-вторых, есть ссылка на w3.org (новые-старые версии).

А поддержку браузерами можно посмотреть и тут http://caniuse.com/pointer-events

Тоже обращение по Утриш подписала, а потом прочитала, что вопрос уже решён в пользу заповедника. Ура. Nonna Здравствуйте. Подскажите, как использовать pointer-events: none для всех изображений, кроме нескольких картинок (значков) социальных сетей, которые являются ссылками? Пробовала к
pointer-events: none;

дописывать
pointer-events: auto
не сработало. В отдельном гаджете — тоже ничего. Может есть какой-то способ сделать исключения для работы мышки только на некоторых картинках? NMitra Здравствуйте,

1) использование класса (изображениям, к которым не нужен pointer-events: none; задать класс) http://jsfiddle.net/NMitra/k954gn16/
img < pointer-events: none; >
img.non

2) исключение для картинок-ссылок http://jsfiddle.net/NMitra/k954gn16/1/
img < pointer-events: none; >
a img < pointer-events: auto; >Nonna Здравствуйте, спасибо за скорый ответ. Пытаюсь разобраться (step by step, а уж Вы исправьте что не так) — добавляю гаджет Настроить HTML/JavaScript, вписываю style img pointer-events: none; style так я получаю неработающую левую кнопку+невозможность выделения изображения+нет пункта «сохранить изображение как..» Тут разобралась. Все ОК. Это должно быть применимо ко ВСЕМ изображениям и поэтому сразу перехожу к 2) Вашего ответа — исключения для картинок ссылок. Тут также есть гаджет Настроить HTML/JavaScript в котором есть (одно из нескольких) a href=https www.facebook.com/N» target blank» title Facebook img src https mg-fotki.yandex.ru/get/15519/235879411.0/0_101ae5_4b1c1ddd_XXS.gif style height: 30px; width: 30px; a. И вот тут я застреваю — если у меня в отдельном гаджете уже стоит для всех, то как мне выделить a img? А третий гаджет — переводчик, там есть картинки и для них нужны работающие и правая и левая кнопки мыши.Там есть a class google_translate href target blank» rel nofollow» title English» onclick window.open(‘http translate.google.com/translate?u encodeURIComponent(location.href) langpair auto%7Cen&hl=en return false img alt English» border 0″ align absbottom» title «English height 24src http4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United Kingdom Great+Britain).png style cursor pointer;margin-right 8px width 28 a. Надеюсь, что понятно объяснила свою проблему)) Буду благодарна за пошаговую помощь, так как я еще новичок )) Nonna И еще кое-что. Если с запретом сохранения картинок на компе более-менее понятно, то что делать с мобильниками? «Показывать на мобильных устройствах мобильную версию текущего шаблона. Да.Показывать мобильные шаблоны на мобильных устройствах \Нет.Показывать шаблоны для компьютеров на мобильных устройствах.» И так и так при клике на фото они открываются в отдельном окне с показательным адресом. И сразу предлагается сохранить фото. Плюс у меня свой домен и хотелось бы не отсвечивать движок на адресах картинок. Есть такая возможность? NMitra Здравствуйте. Так.
1) у вас все картинки идут с Г+, поэтому их все там можно вытянуть,
2) изображения индексируют поисковые системы (в полный рост и с хорошим качеством) и человек в большинстве случаев рыщет именно по картинкам Яндекса и Гугл.
3) какой бы вы скрипт не поставили, при желании скопировать адрес изображения для меня не составит большого труда.
4) принадлежность к платформе выдаёт построение кода, а не столько изображения, их может бросать в Г+ и сайт на хостинге

В гаджете не должно быть проблем, так как второй строкой
a img < pointer-events: auto; >
мы убираем действие pointer-events для картинок, у которых родитель ссылка Nonna Здравствуйте. С Вашими ответами разобралась, все понятно, спасибо. С гаджетом не получается все равно: если пишу первую строку, то отключается все, а если пишу 2 строки (вот так) style img < pointer-events: none; >a img < pointer-events: auto; >style, то все вновь включается.То есть исключение для ссылочных картинок не работает. NMitra Только для Blogger

Как запретить браузеру выделять текст

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

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

Internet Explorer

Для элементов устанавливаем атрибут unselectable со значением on. Но тут есть один нюанс: текст блока с таким атрибутом нельзя выделить (то есть нельзя начать выделение с данного элемента, и клик по такому элементу не будет снимать выделение с текста, если такой выделен), но если он содержит другие элементы (к примеру «безобидные» SPAN, B и т.д.) то текст в них выделить можно. К тому же если выделение текста начато с блока без такого атрибута, то текст внутри блока с атрибутом unselectable так же будет выделен. В такой ситуации решение одно — ставить всем (!) элементам данный атрибут, что неудобно и не практично.
Перехват события selectstart. Другими словами добавив элементу onselectstart=«return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.

FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)

Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать:

-moz-user-select: none; -khtml-user-select: none; user-select: none;

И дело в шляпе.

Другие браузеры

А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению. Но есть, есть один могильничек 🙂
Изучая вчера файл Оперы с хаками для сайтов, наткнулся на интересные строки:

document.addEventListener('mousemove',function(e)< if( e.target.getAttribute('unselectable')=='on' ) e.target.ownerDocument.defaultView.getSelection().removeAllRanges(); >,false);

Вспомним про атрибут unselectable у Internet Explorer’а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:

function preventSelection(element) < var preventSelection = false; function addHandler(element, event, handler)< if (element.attachEvent) element.attachEvent('on' + event, handler); else if (element.addEventListener) element.addEventListener(event, handler, false); >function removeSelection() < if (window.getSelection) < window.getSelection().removeAllRanges(); >else if (document.selection && document.selection.clear) document.selection.clear(); > function killCtrlA(event) < var event = event || window.event; var sender = event.target || event.srcElement; if (sender.tagName.match(/INPUT|TEXTAREA/i)) return; var key = event.keyCode || event.which; if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65 < removeSelection(); if (event.preventDefault) event.preventDefault(); else event.returnValue = false; >> // не даем выделять текст мышкой addHandler(element, 'mousemove', function()< if(preventSelection) removeSelection(); >); addHandler(element, 'mousedown', function(event)< var event = event || window.event; var sender = event.target || event.srcElement; preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i); >); // борем dblclick // если вешать функцию не на событие dblclick, можно избежать // временное выделение текста в некоторых браузерах addHandler(element, 'mouseup', function()< if (preventSelection) removeSelection(); preventSelection = false; >); // борем ctrl+A // скорей всего это и не надо, к тому же есть подозрение // что в случае все же такой необходимости функцию нужно // вешать один раз и на document, а не на элемент addHandler(element, 'keydown', killCtrlA); addHandler(element, 'keyup', killCtrlA); >

Вызвав данную функцию, например:

preventSelection(document);

Opera не дает обрабатывать событие dblclick, так что в этом браузере все равно возможно выделить текст двойным кликом.

Ctrl+A:

В Opera длительное (2-3 секунды) удержание данной комбинации вызывает выделение текста до ее отпускания. Причем если первым отжать клавишу А а потом Ctrl, то выделение пропадает. Иначе остается.
Safari не обрабатывает keydown для клавиш при зажатом Ctrl. Потому выделение текста пропадает только после отпускания клавиш. Причем для этого браузера характерно поведение Opera, в плане порядка отпускания клавиш (если первым отжать Ctrl, то выделение останется).

Safari & FireFox выделяют слово, и сразу снимают выделение. То есть присутствует эффект кратковременного выделения текста.
Opera не дает запретить поведение по умолчанию. Она выделяет слово и вызывает контекстное меню.

Как отменить выделение css

На некоторых сайтах можно встретить ситуацию, когда выделение текста прямо запрещено – при попытке выделить стандартным способом с зажатой левой кнопкой, ничего не происходит. Делают это, обычно, для того, чтобы напакостить любителям копипаста. В других же случаях это просто необходимо (формы Drag&Drop, выделение текста кнопок и пр.)

Чтобы запретить выделение текста, можно воспользоваться вендорными свойствами CSS. Пример для браузеров Firefox и Chrome:

-moz-user-select: none;
-webkit-user-select: none;

Если же на странице, где вам нужно выделить текст, используется данный метод, то для обхода запрета выделения нужно через «Инструменты разработчика» (Developer Tools) добавить следующее свойство (либо же найти запрещающее свойство и отключить его):

Управление выделением элементов на сайте при помощи CSS спецификации user-select

При верстке многих элементов часто появляется необходимость снять возможность их выделения. Иначе красиво оформленная кнопка изменяется визуально при случайном выделении.

Управлять выделением можно при помощи CSS спецификации user-select.

Управление выделением текста на странице при помощи user-select

Разберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.

Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.

Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры

Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.

Этот текст выделяется одним нажатием вместе с дочерними элементами.

Допустим у нас есть страница с текстом и изображениями. Нужно сделать так, чтобы мы могли выделить только текст без изображений.

В этом тексте находится изображение и при выделении текста изображение не выделяется.

Управление выделением других элементов

Если у вас есть кнопка, например, в контейнера и вы не хотите, чтобы она не выделялась вместе с текстом, при двойном нажатии на содержимое и другими возможными способами, то вы также можете использовать «user-select:none;».

Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.

Запрет вызова контектсного меню

Далеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».

Выше также прописаны параметры user-select для браузера Mozilla и Chrome.

Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.

Убрать выделение при клике css

Запретить выделение текста можно при помощи свойства CSS — user-select . Для старых браузеров необходимо подставлять префикс, у каждого браузера свой префикс.

-webkit-user-select — вебкит браузеры (Хром, Сафари);

user-select — для браузеров последних версий.

Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.

У кликов мыши есть неприятная особенность.

Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.

Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.

Способ 1: отмена mousedown/selectstart

Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.

Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.

Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.

Полный код элемента, который обрабатывает двойной клик без выделения:

При установке на родителя – все его потомки станут невыделяемыми:

Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.

Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.

Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.

Способ 2: снятие выделения пост-фактум

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

Для этого мы используем методы работы с выделением, которые описаны в отдельной главе Выделение: Range, TextRange и Selection. Здесь нам понадобится всего лишь одна функция clearSelection , которая будет снимать выделение.

Пример со снятием выделения при двойном клике на элемент списка:

У этого подхода есть две особенности, на которые стоит обратить внимание:

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

Способ 3: свойство user-select

Существует нестандартное CSS-свойство user-select , которое делает элемент невыделяемым.

Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.

Это свойство работает (с префиксом) везде, кроме IE9-:

IE9-: атрибут unselectable=«on»

В IE9- нет user-select , но есть атрибут unselectable.

Он отменяет выделение, но у него есть особенности:

Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.

Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .

Итого

Для отмены выделения есть несколько способов:

CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).

Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)

Отмена действий на mousedown и selectstart :

Отмена выделения пост-фактум через функцию clearSelection() , описанную выше.

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

17 октября 2009 39 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
Формы, часть 1, “Форма обратной связи на PHP”

Следующая запись »
Формы, часть 2, “Проверка формы на PHP”

улевойВот иногда бывало время сверстаешь сайт, с иголочки всё, протестишь во всех браузерах (по желанию читаем статью про кроссбраузерность), и всё кажется в ажуре и шоколаде. Но вот в Firefox в глаза попадает следующая вещь – вокруг некоторых ссылок или изображений при клике/выделении появляется уёбищная сволочная неприятная пунктирная рамка, которая портит весь тот самый ажур и шоколад.

Данная вещь существует не только в Firefox, но и в некоторых Internet Explorer’ах. Ну назвать её раздражающей это мало. Однако. Однако убирается она всего лишь одной строкой в CSS:

Однако этот вариант не единственный, хотя бесспорно лучший. Раньше пунктирную рамку можно было убрать при помощи javascript. Для этого каждому тегу ссылки надо было приписать onclick=»this.blur();. Но с приходом CSS2 эта вещь отпала. И к счастью=).

UPD: Недавно использовал плагин jQuery под названием jScroll, который позволяет делать блоки контента на сайте с красивооформленной полосой прокрутки. Так вот, в Firefox и Chrome при клике на тот контейнер (div), на который плагин ставит полосу прокрутки, происходит его выделение в первом случае пунктирной рамкой, а во втором случае жёлтой линией. И чтобы это убрать, недолго думая я всем дивам прописал нулевой оутлайн. И было мне большое счастье=).

Как запретить пользователю выделять текст в браузере

Если Вы веб-разработчик, то у вас, наверняка, возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею в виду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п., где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop или выделении текста при двойном клике).

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

Что же мы можем сделать? Рассмотрим, какие возможности борьбы с выделением текста предлагают нам браузеры.

Современные браузеры имеют довольно совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS-свойство user-select со значение none, которое включили в CSS3. И дело в шляпе.

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

Исходный код этого примера:

Обратите внимание на то, что если начать выделение выше защищенного абзаца (для наглядности его текст сделали красным), а закончить ниже, то наша защита всё равно сработает.

Похожие публикации:

Где учить css
Для чего служит модель css flexbox
Как сделать рамку для картинки в css
Как сделать свечение css

Как запретить выделять текст css