Доброго времени суток. 🙂
Часто при создании сайтов, я сталкиваюсь с задачей от своих заказчиков, с возможностью скрыть телефонный номер или его часть. Задача стоит скрыть именно главный телефонный номер, который чаще всего размещают в шапке сайта или в подвале. Хотя бывает нужно скрывать и все номера на сайте.
Зачем скрывать телефонный номер на сайте? Тут причины разные. На сайтах объявлений, это делается, чтобы спам боты не собирали номера клиентов, для спам СМС рассылок. На обычных сайтах могут добавлять такую опцию для отслеживания активности посетителей, для установки целей от 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.
По желанию, можете добавить стилей в соответствии с нуждами сайта и тд. Если все правильно сделано, то все должно работать правильно и безотказно.
На этом все, спасибо за внимание. 🙂