Не выделять телефон html

user-select¶

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

Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* Keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: unset; /* Mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* WebKit-specific values */ -webkit-user-select: none; -webkit-user-select: text; /* Doesn't work in Safari; use only "none" or "text", or else it will allow typing in the container */ -webkit-user-select: all; /* Microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; 

Значения¶

auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.

Примечание¶

• Internet Explorer поддерживает свойство -ms-user-select .
• Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select .
• Firefox поддерживает свойство -moz-user-select .
• Значение contain поддерживается только в IE.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

html> head> meta charset="utf-8" /> title>user-selecttitle> style> body  -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; > .enable  -ms-user-select: all; -moz-user-select: all; -webkit-user-select: all; user-select: all; > style> head> body> p>Этот текст нельзя выделитьp> p> input type="text" value="Этот текст можно выделить" /> p> p class="enable"> Этот b>текстb> тоже можно выделить p> body> html> 

Источник

Как сделать кликабельный телефон на сайте

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

Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

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

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

Или можно добавить ссылку для звонка со Skype на телефон:

Источник

Как сделать так, чтобы мобильный браузер не смог форматировать номер телефона в ссылку

Как всем известно, браузер преобразует кодовую информацию в графическую. Этот процесс обычно проходит согласно общепринятым правилам и стандартам, поэтому верстальщики могут создать ресурс с таким дизайном, который будет выглядеть одинаково во всех программах. Однако существуют некоторые исключения. К примеру, для Firefox, существует специальный плагин, посредством которого можно осуществлять звонки по Skype, не покидая при этом страницы (подробнее об этом читайте тут). Особенность этого плагина заключается в том, что он распознает номера телефонов, причем применяет к ним собственное оформление, что не всегда совпадает с дизайнерским решением ресурса.

Аналогичная ситуация повторяется и для мобильных браузеров. В частности это касается браузера от BlackBerry, а также программ системы Android и, в том числе, Safari производства компании Apple. Эти программы распознают номера телефонов и преобразуют их в мобильные ссылки.

Для справки

Сущность мобильной ссылки главным образом соответствует обычной компьютерной, но в отличие от последней, осуществляется не переход на другую страницу или сайт, а осуществляется звонок по указанному номеру.

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

Для браузеров IOS и Android этот специальный мета-тег записывается следующим образом

meta name="format-detection" content="telephone=no">

BlackBerry положительно отреагирует на такую запись

meta http-equiv="x-rim-auto-match" content="none">

Стоит отметить, что при применении этого кода мы отменяем распознавание телефонов, но не проигрываем в функциональности. То есть мы можем организовать удобный способ звонка без особых изменений в дизайне. Для этого стоит воспользоваться атрибутом tel:, который вставляется в начале адреса ссылки. Также стоит отметить, что с помощью подобных ссылок можно осуществлять не только звонки, но и отсылать SMS-ки. Ниже представлены примеры таких ссылок для мобильных браузеров

a href="sms:12345678">Сообщение для абонента 12345678a> a href="tel:+1234567890"> Звоните нам прямо сейчас!  a>

Источник

Как отключить выделение номера телефона браузером HTML.

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

Существуют несколько вариантов решения проблемы. В случае с мобильными устройствами всё не так плохо, можно прописать специальный мета-тег на странице и проблема зачастую будет решена. Но такой подход работает только на некоторых мобильных платформах и совершенно не подходит для полноформатных windows браузеров.

Для Safari (iPhone / IPod / IPad) и Android браузера

Для BlackBerry

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

Самым оптимальным и простым, на мой взгляд, решением такой задачи может послужить внедрение телефонного номера в тег «input» с запретом на ввод данных. Дело в том, что при анализе страницы браузером поля input воспринимаются как поля ввода данных и не преобразуются. Остаётся только прописать стилизацию для input: высоту, отступы, размер шрифта и т.п.

Источник

Как отключить преобразование телефонных номеров в ссылки на мобильных.

Если вы занимаетесь версткой, то рано или поздно столкнетесь с проблемой автозамены телефонных номеров в ссылки на мобильных устройствах. То есть, если в написали на сайте номер обычным текстом, то мобильные браузеры Android и iOS (Safari) автоматически преобразовывают обычный текст в ссылку. Делается это для удобства пользователя, чтобы он смог сразу позвонить, но иногда автозамена работает не корректно и не весь номер выделяется. Так же преобразование номера в ссылку влечет за собой изменение стилей номера. Вы могли задать какие-то CSS стили элементу с номеров, а преобразование, естественно сделает так, что номер станет просто синим подчеркнутым текстом. Как понимаете, это может не совсем корректно отобразится среди остального дизайна сайта.

Избавится от такого эффекта можно несколькими способами. Можно просто самому сделать из телефона ссылку и задать ей нужные стили, а путь ссылки указать используя :tel. Если у вас был просто номер +1234567890. То лучше его сделать таким:

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

Но, бывает так, что номеров на сайте много или нет времени переделывать их на ссылки, ну или просто ссылки вам не хочется делать, то можно воспользоваться МЕТА-тегом. Добавляете его к другим мета тегам вашего сайта в шапке и все.

Данный тег запретит устройствам работающим на iOS(iPhone / IPod / IPad) и Android делать из номеров ссылки. Так же можно еще добавить мета-тег для устройств — BlackBerry

Какой способ выбрать — решать вам.Но использовать один из них придется, если вы хотите корректное отображение всех элементов сайта на любом устройстве и избавить себя от проблем, что могут возникнуть.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂

Источник