Главная
Web-дизайн
Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

Доброго времени суток. 🙂

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

Зачем скрывать телефонный номер на сайте? Тут причины разные. На сайтах объявлений, это делается, чтобы спам боты не собирали номера клиентов, для спам СМС рассылок. На обычных сайтах могут добавлять такую опцию для отслеживания активности посетителей, для установки целей от Google или Яндекс и тд.

Сделать это можно довольно просто. Нужно поставить на сайт скрипт для скрытия номера. Пример того что получится, можно посмотреть ниже:



Пример

Чтобы скрыть телефонный номер, вам потребуется сделать несколько моментов на своем сайте. Для начала нужно добавить скрипт. Но, для его роботы нужна библиотека jQuery. Если она подключена на сайте, то все отлично, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Сама библиотека:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки подключаем сам скрипт, который имеет следующий вид:

<script>
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
});
});
</script>

В этом скрипте, вам нужно в будущем только две предпоследние строки:

$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();

Первая строка отвечает за скрытие слова ПОКАЗАТЬ после нажатия. Вторая за замену части номера, ну или всего, если вы немного переделаете.

Чтобы скрипт работал, вам нужно свой номер телефона, часть которого вы хотите скрыть, обернуть в некоторые теги и добавить кнопку показать. Выглядит номер с кодом должен примерно так:

+1234<span class="num_hide">567890</span> <span class="sh_nmr">показать</span>

Часть или весь номер, нужно заключить в тег span с классом - num_hide. После номера добавить кнопку показать, заключенную в тег span с классом - sh_nmr.

По желанию, можете добавить стилей в соответствии с нуждами сайта и тд. Если все правильно сделано, то все должно работать правильно и безотказно.

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 8, в среднем: 4.5 из 5

Опубликовано 11 комментариев

  • Никита
    Комментариев: 6

    Спасибо, все получилось. Подскажите как сделать, чтобы при наведении на слово "показать" появлялся значок "рука" как при наведении на ссылку?

    • Виталий
      Комментариев: 549

      Пропишите в стилях CSS для sh_nmr параметр cursor:pointer;

    • Никита
      Комментариев: 6

      Разобрался css
      .sh_nmr {
      text-decoration: underline;
      cursor: pointer;
      }
      Еще вопрос нужно тоже самое сделать на емеил. Изменил класс num_hide2 , sh_nmr2. Продублировал скрипт для этих классов, обернул емеил в теги, но работает криво, кнопка "показать" есть, но не нажимается.

      • Никита
        Комментариев: 6

        Все сделал под одним классом, вроде работает. Осталось поставить цель метрики. подскажите пожалуйста куда воткнуть onclick="yaCounterXXXXXX.reachGoal('TARGET_NAME') чтобы работала?

        • Виталий
          Комментариев: 549

          Ну если надо на нажатие кнопки показать, то к ней и добавляйте
          <span class="sh_nmr" onclick="yaCounterXXXXXX.reachGoal('TARGET_NAME')">показать</span>

  • Никита
    Комментариев: 6

    На емеил ставится нормально
    <div class="flex">
    <span>E-mail:</span>
    <a href="mailto:NikitaJolobov@yandex.ru" title="NikitaJolobov@yandex.ru" rel="">NikitaJolobov@<span class="num_hide" onclick="yaCounter4988###.reachGoal('klikem'); return true;>yandex.ru</span></a><span class="sh_nmr">показать</span>
    </div>

    А когда ставлю на телефон пропадает скрытие и кнопка показать
    +7 (922) 13-95-219 показать

  • Никита
    Комментариев: 6

    скрипт телефона
    <div class="u phone">+7 (922) 13-<span class="num_hide">95-219</span> <span class="sh_nmr" onclick="yaCounter49889689.reachGoal('kliktel'); return true;">показать</span></div>

  • Алексей
    Комментариев: 2

    Здравствуйте!
    Отличная статья! Код работает!
    А как в него вставить код отслеживания цели GA? Сайт на WP.
    Пробовал в ЗАПИСИ и с Яндекс и Гугл - код вылетает.
    Спасибо!

  • Алексей
    Комментариев: 2

    В продолжение: Может быть можно как-то вставить в JS?

  • Илья
    Комментариев: 1

    Что-бы работало отслеживание цели в ЯМ, нужно конец кода привести к след, виду:
    $(function(){
    $('.sh_nmr').textToggle(".sh_nmr","").click();
    $('.sh_nmr').textToggle(".num_hide","34-ХХ-ХХ").click();
    $('.sh_nmr').click(function() {
    yaCounterХХХХХХХХ.reachGoal('cliсktel');
    });
    });

    +7 (381) 123-45-67 показать номер

    Идентификатор цели в данном случай будет называться cliсktel.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

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