Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.
-moz-user-select: none; -khtml-user-select: none; user-select: none;
document.addEventListener("mousemove",function(e){ if(e.target.getAttribute("unselectable")=="on") e.target.ownerDocument.defaultView.getSelection().removeAllRanges(); },false);
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); }
Бывают ситуации, когда необходимо запретить выделение текста или сделать на сайте кнопку по которой будут кликать много раз подряд (например, стрелка слайдера). И случается такая неприятная ситуация, когда после 2 или 3 клика какая то область выделяется синим цветом. Это очень раздражает и не дает спокойно дальше работать. С этим можно и нужно бороться.
Сегодня мы рассмотрим 3 способа запретить выделение текста на сайте с помощью css, javascript и передачей фокуса.
Самый простой и действенный (на мой взгляд) способ с помощью css. Для браузеров, которые не поддерживают это свойство написаны префиксные варианты. Вешать нужно непосредственно на сам элемент (например, кнопку):
Webkit-touch-callout: none ; -webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;
Этот способ подразумевает написание и исполнение скрипта. По статистике в 95% браузерах JavaScript будет работать. Поэтому можно считать этот способ достаточно безопасным и жизнеспособным:
$("body" ) .on ("mousedown" , "ТУТ УКАЗЫВАЕМ ID или CLASS БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id" , function (e) { e.preventDefault () ; } ) ;Способ очень не очевидный, но тоже работает. Суть заключается в том, что при клике на элемент, фокус после клика передается на другой элемент. Кому и зачем это может понадобиться? Ситуации бывают разные, может и пригодится:
$("body" ) .on ("mouseup" , "ТУТ УКАЗЫВАЕМ ID или КЛАСС БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id" , function () { $("ТУТ УКАЗЫВАЕМ ID или CLASS ЭЛЕМЕНТА, НА КОТОРЫЙ ПЕРЕДАЕМ ФОКУС" ) .trigger ("focus" ) ; } ) ;Вот и все! Успехов с выделениями!
Приветствую, Друзья.
После очередного долгого перерыва вспомнил, что давно уже не писал ни строчки. Конечно, на это есть свои причины, ведь какая-нибудь причина придумать себе оправдание всегда найдется, правда? На самом деле, каждый день занимаюсь ВидеоКурсом, о котором уже упоминал пару раз, но пока больше об этом ничего говорить не буду, скоро все узнаете.
Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.
Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.
Чтобы выделить текст жирным начертанием не нужно ничего мудрить со стилями CSS или придумывать еще какие-либо сложности. В HTML уже есть такая возможность. При этом, мы можем не просто выделить текст жирным, но и сделать на нем некий акцент с помощью выделения. Акцент может делаться для поисковых систем или каких-либо специальных браузеров или программ. Главное это не переборщить с акцентированием текста в статье или на странице с как-то информацией, так как это может губительно сказаться как минимум на продвижении данной HTML-страницы.
Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом . Данный тег относится к элементам физической разметки, при этом устанавливая жирное начертание текста, не делая на нем какого-либо акцента. Этот тег является парным, что говорит о том, что он имеет, как открывающий тег, так и закрывающий. Кроме того, так как элемент встроенный, он должен находиться в каком-либо блочном элементе, например
Пример кода:
жирный текст
Результат:
жирный текст
В этом случае мы просто выделили текст жирным начертанием и все.
Но бывает, так что нам нужно не просто выделить текст, а сделать на нем акцент. Для этого мы можем использовать тег логической разметки . Мало того, что текст, выделенный, этим тегом имеет больший вес для поисковых систем. Но и по идее он должен отличаться от тега в речевых браузерах, например интонацией. Однако не могу ни подтвердить, ни опровергнуть данную информацию, так ли это?
В этом случае все абсолютно также как и в случае, с простым выделением жирным, только мы делаем акцент, а не просто выделение.
Пример кода:
Результат:
Все довольно просто, не правда ли?
В этом случае все не сложнее, чем в первом. И ситуация у нас абсолютно та же. Мы можем выделить текст двумя вариантами в HTML. Опять же, используя либо тег физической разметки или же тег логической, с помощью которого мы опять же делаем акцент на выделенный текст.
Чтобы выделить текст курсивом мы воспользуемся тегом . Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа
Пример кода:
текст курсивом
Результат:
текст курсивом
И конечно же мы можем сделать акцент на тексте одновременно выделив его курсивом с помощью тега . Данный элемент такой же как , за исключением того что выделяется текст курсивом а не жирным.
Пример кода:
текст, на котором мы сделали акцент
Результат:
текст, на котором мы сделали акцент
И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.
К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.
Итак, чтобы выделить определенную часть текста цветом, мы можем обернуть нужную часть текста тегом , который является универсальным тегом, и используется внутри блочного элемента. В нашем случае блочным элементом является тег Но добавить недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти . Теперь чтобы было понятней рассмотрим пример. Пример кода.
текст, который нужно выделить цветом
В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег является парным, и мы должны его закрыть там, где свойство должно закончиться.
Результат:
текст, который нужно выделить цветом
Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.
Надеюсь, я все понятно объяснил.
Удачи, Друзья. Скоро… Будут интересные новости…
Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.
Этот текст нельзя выделить
Этот текст тоже можно выделить
Internet Explorer и Edge поддерживают свойство -ms-user-select .
Chrome до версии 54, Opera до версии 41, Safari и Android поддерживают свойство -webkit-user-select .
Firefox поддерживает свойство -moz-user-select .
Значение contain поддерживается только в IE.
Каждая спецификация проходит несколько стадий одобрения.