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

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

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

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

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

Для BlackBerry

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

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

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

<input class="phonesno" value="+7(900)123-45-67" />

.phonesno{
    display: inline;
    font-size: 14px;
    vertical-align: middle;
    outline: none;

ТОП 10 случайных публикаций