Как убрать выделение в браузере
Как запретить браузеру выделять текст
Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов. Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.
Internet Explorer
Данный браузер дает нам две возможности:
2. Перехват события selectstart. Другими словами добавив элементу onselectstart=»return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.
FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)
Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать: И дело в шляпе.
Другие браузеры
А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению.
Изучая файл Оперы с хаками для сайтов, наткнулся на интересные строки: Вспомним про атрибут unselectable у Internet Explorer’а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:
Других особенностей не выявлено.
Тестировалось на FireFox 2.0.11, IE 6.0, Opera 9.24, Safari 3.0.3 (Win).
Конечно решение не идеальное, и требует JavaScript (с другой стороны это и нужно в веб-приложениях, которые и так используют JS). Но это лучше чем ничего, и довольно кроссбраузерно (конечно может потребоваться дополнительный код для некоторых браузеров и их версий).
Как убрать выделение границы на элементе ввода текста
Когда элемент HTML «сфокусирован» (в данный момент выбран / вставлен вкладкой), многие браузеры (по крайней мере, Safari и Chrome) будут помещать вокруг него синюю рамку.
В макете, над которым я работаю, это отвлекает и выглядит некорректно.
Firefox, похоже, не делает этого или, по крайней мере, позволяет мне контролировать это с помощью:
Если бы кто-нибудь мог сказать мне, как работает IE, мне было бы любопытно.
Было бы неплохо заставить Safari удалить эту небольшую засветку.
19 ответов
В вашем случае попробуйте:
Или вообще, чтобы повлиять на все основные элементы формы:
В комментариях Ной Уитмор предложил пойти еще дальше, чтобы поддержать элементы, для которых для атрибута contenteditable установлено значение true (фактически делая их типом элемента ввода). Следующее должно быть нацелено и на них (в браузерах с поддержкой CSS3):
Хотя я бы не рекомендовал это для полноты картины, вы всегда можете отключить контур фокуса для всего следующим образом:
Чтобы удалить его со всех входов
Это старый поток, но для справки важно отметить, что отключение контура элемента ввода не рекомендуется, поскольку это затрудняет доступность.
Это сбивало меня с толку в течение некоторого времени, пока я не обнаружил, что линия не была ни границей, ни контуром, это была тень. Итак, чтобы удалить его, мне пришлось использовать это:
Это общая проблема.
схема по умолчанию, отображаемая браузерами, ужасна.
Смотрите это, например:
Я нашел очень сухой веб-сайт, который хорошо все объясняет.
Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с помощью клавиши TAB (или ее эквивалента). Это особенно полезно для людей, которые не могут пользоваться мышью или имеют нарушения зрения. Если вы удалите схему, вы сделаете свой сайт недоступным для этих людей.
Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте клавишу TAB для навигации.
Обратите внимание, как вы можете определить, где находится фокус, даже не щелкнув поле ввода?
А теперь давайте попробуем outline:none на нашем надежном
Итак, еще раз, используйте клавишу TAB для навигации после щелчка по тексту и посмотрите, что произойдет.
Теперь сравните это с тем же шаблоном, если мы сохраним схему:
Итак, мы установили следующие
Итак, каков ответ?
Удалите уродливые очертания и добавьте собственные визуальные подсказки, указывающие на фокус.
Вот очень простой пример того, что я имею в виду.
Я удаляю контур и добавляю нижнюю границу на : focus и : active. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, установив их прозрачными на : focus и : active (личные предпочтения )
Итак, мы пробуем описанный выше подход на нашем «реальном» примере из более раннего:
Это можно расширить с помощью внешних библиотек, которые основаны на идее изменения «схемы», а не полного ее удаления, как Materialize
Вы можете получить что-то не уродливое и работающее с очень небольшими усилиями.
Единственное решение, которое сработало для меня
Граница на самом деле является тенью. Чтобы скрыть это, мне пришлось сделать следующее:
Удаление всех стилей фокуса плохо для специальных возможностей и пользователей клавиатуры в целом. Но контуры уродливы, и создание настраиваемого сфокусированного стиля для каждого отдельного интерактивного элемента может быть настоящей проблемой.
Это не мешает вам писать собственные стили фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.
Вот как я это делаю:
Вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:
Мышь: отмена выделения, невыделяемые элементы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.
У кликов мыши есть неприятная особенность.
Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.
Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.
Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.
Способ 1: отмена mousedown/selectstart
Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.
Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.
Полный код элемента, который обрабатывает двойной клик без выделения:
При установке на родителя – все его потомки станут невыделяемыми:
Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.
Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.
Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.
Способ 2: снятие выделения постфактум
Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.
Пример со снятием выделения при двойном клике на элемент списка:
У этого подхода есть две особенности, на которые стоит обратить внимание:
Способ 3: свойство user-select
Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.
Это свойство работает (с префиксом) везде, кроме IE9-:
IE9-: атрибут unselectable=«on»
Он отменяет выделение, но у него есть особенности:
Итого
Для отмены выделения есть несколько способов:
CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
Отмена действий на mousedown и selectstart :
Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование – можно использовать событие oncopy :
Как в Ворде быстро убрать выделение текста
При копировании из интернета необходимой информации в Ворд, текст почему-то выглядит так, как будто его закрасили фломастерами или выделили специальным маркером. Пользователи текстового редактора довольно часто затрудняются убрать такое цветное выделение. В данной статье рассмотрим, как убрать выделение текста в ворде, которое не убирается.
Выделяем цветной текст
Щелкаете в начале цветного фрагмента и, зажав левую кнопку мыши, перемещаете указатель по тексту, который нужно выделить.
Совет! Чтобы быстро выделить весь документ, выполняете следующее: на вкладке Главная – группа Редактирование – элемент Выделить и выбираете команду Выделить все.
Можно воспользоваться сочетанием клавиш CTRL+A или три раза нажать левой клавишей мыши в левой части документа.
Далее приступаете к удалению цветного фона за текстовым блоком одним из нескольких методов, о которых ниже.
Очищаем формат
На вкладке Главная в группе Шрифт нажимаете на значок Очистить формат.
Данная функция в Ворде легко отменяет все параметры форматирования текстового фрагмента (например, серое выделение, огромный шрифт, подчеркивания, курсив и т. д.) и вернёт скопированную информацию к стилю форматирования по умолчанию.
Отмена цвета выделения
Находите во вкладке Главная группу Шрифт, щелкаете на значок Цвет выделения текста и выбираете квадратик Нет цвета.
Удаление заливки
Выбираете вкладку Разметка страницы, ищете в группе Фон страницы значок Границы страниц. В открывшемся диалоговом окне в разделе Заливка открываете цвета и устанавливаете Нет цвета. Сохраняете изменения кнопкой ОК.
Как видите, существует несколько способов убрать цветной фон за текстом. Самым действенным способом является очистка формата, но после выполнения этого действия необходимо снова восстанавливать стиль написания документа, что требует дополнительных затрат времени.
Поделись с друзьями!
Жми «Нравится» и получай только лучшие посты в Facebook ↓
MS Word: как убрать фон у скопированного текста.
Извиняюсь, если что-то подобное было и что рассматривается лишь Word 2007. Под рукой нет более поздних версий. Пользователям других версий может пригодиться хотя бы общий принцип решения проблемы.
Текст и скрины мои, но не уверен, что тег нужен.
Итак, нередко при копировании с какого-нибудь сайта мы сталкиваемся с ситуацией, когда фон у этого текста остается таким же, каким он был на этом самом сайте. И фон этот не убирается простым снятием выделения или заливки текста.
Многие знают, а кто не знает, узнает в этом предложении, что это решается при помощи копирования текста сначала в «Блокнот», а уже из «Блокнота» в Word. Но можно же обойтись и средствами самого продукта мелкомягких. Причем способы эти не должны вызвать особой сложности.
Итак, способ первый и, возможно, самый оптимальный. Заключается в том, что после копирования следует не просто «вставить» текст, а использовать «специальную вставку». Для этого нужно выбрать ее из подменю кнопки «Вставить», нажав на стрелочку под оной. Или же, как видно на скрине, любителям горячих клавиш вместо Ctrl+V для вставки можно просто нажать Ctrl+Alt+V.
Выпадает окошко, где выбираем «вставить как неформатированный текст». В итоге текст вставится без фона, но возможны мелкие недочеты вроде курсива.
Вроде просто, и на этом можно остановиться. Но есть же и другие варианты решения, которые могут показаться более интересными и простыми.
Итак, вариант второй. У нас есть текст с фоном. Выделяем его. Ищем на ленте/панели инструментов кнопку «Очистить формат» (кнопка с буквами Aa и ластиком). Жмем на нее:
— и параметры текста сбрасываются на знакомый Calibri, 11 пт, с выравниванием по левому краю, но уже без злосчастного фона. Нам остается только выставить нужные выравнивание, шрифт и размер. В принципе, данный способ идентичен по результату способу с «Блокнотом», но занимает меньше времени.
Способ третий, «формат по образцу». В «Ворде» имеется одноименный инструмент, и работает он следующим образом:
Выделяем какой-нибудь «беспроблемный» кусок текста (в другом месте документа), тот, который без фона. Нажимаем на кнопку «формат по образцу»:
Ну и последний на сегодня, способ номер четыре. Убирает фон, «насылает» других «проклятий», зато незначительных. Выделяем текст с фоном. Обращаем взор на панель инструментов, а точнее на блок «Стили». Нам нужно просто-напросто выбрать любой понравившийся стиль без «лишних наворотов». Я обычно выбираю серый курсив:
После применения стиля останется лишь сменить цвет текста (в зависимости от выбранного стиля), убрать курсив и выбрать нужный шрифт. «Лишних» операций хватает, но от проблемы избавиться помогает.
Первый мой серьезный пост, поэтому, может, и страшновато смотрится. Но надеюсь я кому-то помог сделать «офисную» жизнь немного проще 🙂
Самый простой способ это перед вставкой в Word текст скопировать в блокнот или любой другой текстовый редактор а из блокнота уже в Word.
Таким образом из текста уберется информация о html разметке и в Word он уже вставится нормальным.
Спасибо большое, пишу диплом, ваш пост очень помог!❤
Дай тебе бог здоровья, добрый человек)
А вообще рекомендую стилями пользоваться. Позволяют быстро переформатировать весь документ в пару кликов, если вдруг возникает необходимость.
Храни тебя господь, ты спас мою курсовую ))
Чел, щас 3 часа ночи, а мне еще нужно написать реферат по психологии. Просто огромное тебе спасибо, что бы я без тебя делал? Ах да, не спал. Спасибо еще раз
«хитрости жизни». то чему учат везде
Способ нулевой, ещё более оптимальный:
По мне, так намного удобнее программа
«Как можно спасти людей без пролития крови?»
Опять еду со смены, никого не трогаю.
Вечер, закат заливает салон красными лучами. На остановке в салон заходит усталый люд с работы.
И среди них находиться яркая личность. На этот раз индивиду мужского пола не понравился водитель автобуса.
Как и почему не видел, потому что сидел около задней двери и втыкал в мобилу. И тут слышу уже натуральный ор на передней площадке. Водила и чувачок ругаются через окошко для продажи билетов. На скорости около 70 км. Салон от эмоций уже начинает ощутимо шатать. Пассажиры смотрят на это действие и молчат.
В наш содержательный диалог вслушиваются люди и водила. Мой оппонент предлагает выйти на улицу и продолжить нас диспут путем боксирования. Нет проблем.
Автобус остановился около обочины, до следующей остановки около 2 км.
Чувак вылетает и начинает выть в снежную пустыню: » Я вышел и жду тебя. «.
Кричу водителю:» Закрывай дверь и поехали. Этот пешком дойдет».
Двери с шипением закрываются, машина плавно трогается. Любитель приключений остается стоять как черный столб на снежной простыне.