Как скрыть телефонный номер на сайте

Нередко при создании сайтов возникает необходимость скрыть телефонный номер на сайте или его часть.

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

Скрыть телефонный номер на сайте можно довольно просто. Нужно просто поставить скрипт для скрытия номера.

Чтобы скрыть телефонный номер, вам потребуется несколько шагов.  Сначала проверьте, подключена у вас библиотека jQuery. Это должно выглядеть примерно так:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

После библиотеки нужно подключить сам скрипт:

<script>
$.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(){
$('.sc_num').textToggle(".sc_num","").click();
$('.sc_num').textToggle(".num_hide","XXXXXXXXXXX").click();
});
</script>

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

$('.sc_num').textToggle(".sc_num","").click();
$('.sc_num').textToggle(".num_hide","XXXXXXXXXXX").click();

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

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

<span class="num_hide">8 800 900 90-00</span> <span class="sc_num">Показать</span>

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

По желанию, можете добавить стилей в соответствии с оформлением страницы.

Если все правильно сделано, то все работает.

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *