Как скрыть номер телефона XXX XXX а при клике показать

@zahar_92 · Регистрация: 12.06.2015

Студворк — интернет-сервис помощи студентам

Народ подскажите.. Как скрыть номер телефона, например в виде +7 XXX XXXXXXX , а при клике на ссылку Показать, номер отображается +7 999 1112223 Возможно ли это? Или подмену какую-нибудь сделать..

@WeMeSder · 15.05.2016, 18:38

Зачем такую бессмысленную лажу делать??

HTML5
1
<p id = "translationTel">+7 XXX XXX XXX <span id = "showTel" onclick = "showSTR('+ 7 123 456 789')">показать</span></p>

JavaScript
1
2
3
function showSTR(trueTel) {
document.getElementById('translationTel').replaceData (0 , trueTel.length, trueTel);
}

вроде так должно получиться

@zahar_92 · 15.05.2016, 18:58 **[ТС]**

<p id = "translationTel">+7 XXX XXX XXX <span id = "showTel" onclick = "showSTR('+ 7 123 456 789')">показать</span></p>

function showSTR(trueTel) {
document.getElementById('translationTel' ).replaceData (0 , trueTel.length, trueTel);
}

Добавлено через 13 минут
В консоли выдает ошибку.. document.getElementById(...).replaceData is not a function

@WeMeSder · 15.05.2016, 19:08

Сообщение от WeMeSder

document.getElementById('translationTel' ).replaceData (0 , trueTel.length, trueTel);

Моя ошибка
document.getElementById('translationTel' ).firstChild.replaceData (0 , trueTel.length, trueTel);

@zahar_92 · 15.05.2016, 19:20 **[ТС]**

Моя ошибка
document.getElementById('translationTel' ).firstChild.replaceData (0 , trueTel.length, trueTel);

Все равно трабл(( ReferenceError: showSTR is not defined

Добавлено через 5 минут
Не, в этот раз моя ошибка! Все норм работает!

@WeMeSder · 15.05.2016, 19:23

попробуйте так:

HTML5
1
<p id = "translationTel">+7 XXX XXX XXX <span id = "showTel" onclick = "document.getElementById('translationTel').firstChild.replaceData (0 , 14, '+7 123 456 789');">показать</span></p>

второй параметр replaceData '14' - количество заменяемых символов

@zahar_92 · 15.05.2016, 19:24 **[ТС]**

А как теперь в эту конструкцию всунуть переменную с номером телефона?)))

PHP/HTML
1
<? foreach($contacts['phones'] as $v) { ?><span class="hide-tail"><?= $v ?></span><? } ?>

@WeMeSder · 15.05.2016, 19:33

PHP/HTML
1
<? foreach($contacts['phones'] as $v) { ?><span class="hide-tail"><?= $v ?></span><? } ?

>

PHP
1
2
3
4
5
<?
foreach($contacts['phones'] as $v) {
echo '<span class="hide-tail">'.$v.'</span>';
}
?>

@zahar_92 · 15.05.2016, 19:37 **[ТС]**

Если я правильно понимаю, в итоге это должно выглядеть так:

JavaScript
1
2
3
function showSTR(trueTel) {
document.getElementById('translationTel').firstChild.replaceData (0 , trueTel.length, trueTel);
}

HTML5
1
2
3
4
5
<p id = "translationTel">+7 XXX XXX XXX <span id = "showTel" onclick = "showSTR('<?
foreach($contacts['phones'] as $v) {
echo '<span class="hide-tail">'.$v.'</span>';
}
?>)">показать</span></p>

Не судите строго, если написал бред))

@WeMeSder · 15.05.2016, 19:52

я так понимаю что этот цикл содержит номера телефонов, если это так то:

HTML5
1
2
3
4
5
<?
foreach($contacts['phones'] as $v) {
echo '<p id = "translationTel">+7 XXX XXX XXX <span id = "showTel" onclick = "showSTR('$v')">показать</span></p><br>';
}
?>

JavaScript
1
2
3
4
function showSTR(trueTel) {
document.getElementById('translationTel').firstChild.replaceData (0 , trueTel.length, trueTel);
document.getElementById('translationTel').removeChild(document.getElementById('showTel')); // удалит строку "Показать"
}

@zahar_92 · 15.05.2016, 20:04 **[ТС]**

К сожалению при таких раскладах сайт ложится совсем((

Добавлено через 4 минуты
На другом форуме мне подсказали другой вариант

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX").click()
});
</script>

HTML5
1
2
<? foreach($contacts['phones'] as $v) { ?><span class="hide-tail"><?= $v ?></span><? } ?>
<a href="#" class="click-tel">показать телефон</a>

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

@WeMeSder · 15.05.2016, 20:08

Сообщение от WeMeSder

foreach($contacts['phones'] as $v)

думаю дело здесь
где хранятся ваши номера? нужно правильно сложить условие цикла

@zahar_92 · 15.05.2016, 20:11 **[ТС]**

Все номера в БД. Так выглядит рабочий вариант.

PHP
1
2
3
4
5
6
7
8
9
<? if( ! empty($contacts['phones']) ): ?>
            <div class="v-author__contact_items">
                <div class="v-author__contact_title"><?= _t('view', 'Тел.') ?></div>
                <div class="v-author__contact_content j-c-phones">
                     <? foreach($contacts['phones'] as $v) { ?><span class="hide-tail"><?= $v ?></span><? } ?> 
                </div>
                <div class="clearfix"></div>
            </div>
            <? endif; # phones ?>

@WeMeSder · 15.05.2016, 20:22

err

@zahar_92 · 15.05.2016, 20:29 **[ТС]**

О чудо! Работает))) WeMeSder красава! Последний вопрос и я отстану! Как сделать чтобы в коде страницы небыло самого номера, а при клике появился?

HTML5
1
2
3
<div class="v-author__contact_content j-c-phones">
<span class="hide-tail" id="translationTel">XXX XXX <em id="showTel" onclick="showSTR('+79189441611')">показать</em></span><span class="hide-tail" id="translationTel">XXX XXX <em id="showTel" onclick="showSTR('79x xxx xxxx')">показать</em></span> 
</div>

@WeMeSder · 15.05.2016, 20:32

<? if( ! empty($contacts['phones']) ): ?>
<div class="v-author__contact_items">
<div class="v-author__contact_title"><?= _t('view', 'Тел.') ?></div>
<div class="v-author__contact_content j-c-phones">
<? foreach($contacts['phones'] as $v) { ?><span class="hide-tail">XXX XXX <em onclick = "showSTR('<?= $v ?>')">показать</em></span><? } ?>
</div>
<div class="clearfix"></div>
</div>
<? endif; # phones ?>

JavaScript
1
2
3
function showSTR(value) {
this.parentNode.firstChild.replaceData(0, value.length, value);
}

попробуйте так //<?= $v ?> - номер?

@zahar_92 · 15.05.2016, 20:35 **[ТС]**

Да, <?= $v ?> я думаю номер. При последнем варианте номер прячется, в html отображается при нажатии кнопки Показать ошибка в консоли TypeError: Cannot read property 'firstChild' of undefined

@WeMeSder · 15.05.2016, 20:37

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

@zahar_92 · 15.05.2016, 20:39 **[ТС]**

тот вариант не будет работать с двумя и более номерами..

Это вы про тот, что я написал? На JS? Если да, то это я уже выяснил и теперь пытаюсь выяснить как сделать чтобы он работал с двумя номерами (у меня на странице их 2). Написал автору скрипта вопрос, но пока молчит.. Ваш вариант хорош, но номер присутствует в коде и это не очень((

@WeMeSder · 15.05.2016, 20:50

<? if( ! empty($contacts['phones']) ): ?>
<div class="v-author__contact_items">
<div class="v-author__contact_title"><?= _t('view', 'Тел.') ?></div>
<div class="v-author__contact_content j-c-phones">
<? foreach($contacts['phones'] as $v) { ?><span class="hide-tail">XXX XXX <em onclick = "showSTR(this, '<?= $v ?>')">показать</em></span><? } ?>
</div>
<div class="clearfix"></div>
</div>
<? endif; # phones ?>
.................................

function showSTR(th, value) {
th.parentNode.firstChild.replaceData(0, value.length, value);
}

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@zahar_92 1 / 1 / 1 Регистрация: 12.06.2015 Сообщений: 50

	Как скрыть номер телефона XXX XXX а при клике показать 15.05.2016, 18:25. Показов 29214. Ответов 25 Метки hide, html, jquery, script (Все метки) Народ подскажите.. Как скрыть номер телефона, например в виде +7 XXX XXXXXXX , а при клике на ссылку Показать, номер отображается +7 999 1112223 Возможно ли это? Или подмену какую-нибудь сделать.. 0

@WeMeSder 32 / 31 / 21 Регистрация: 13.07.2014 Сообщений: 374
	15.05.2016, 20:22
	Сообщение было отмечено zahar_92 как решение Решение err 1

@zahar_92 1 / 1 / 1 Регистрация: 12.06.2015 Сообщений: 50
	15.05.2016, 20:35 [ТС]
	Да, <?= $v ?> я думаю номер. При последнем варианте номер прячется, в html отображается при нажатии кнопки Показать ошибка в консоли TypeError: Cannot read property 'firstChild' of undefined 0

@WeMeSder 32 / 31 / 21 Регистрация: 13.07.2014 Сообщений: 374
	15.05.2016, 20:37
	тот вариант не будет работать с двумя и более номерами.. из кода убрать номер.. думаю никак, что бы номера не было видно в коде можно добавлять номер с помощью ajax но это еще больше кода и понадобиться новый удаленный файл 0

@WeMeSder 32 / 31 / 21 Регистрация: 13.07.2014 Сообщений: 374
	15.05.2016, 20:50
	<? if( ! empty($contacts['phones']) ): ?> <div class="v-author__contact_items"> <div class="v-author__contact_title"><?= _t('view', 'Тел.') ?></div> <div class="v-author__contact_content j-c-phones"> <? foreach($contacts['phones'] as $v) { ?><span class="hide-tail">XXX XXX <em onclick = "showSTR(this, '<?= $v ?>')">показать</em></span><? } ?> </div> <div class="clearfix"></div> </div> <? endif; # phones ?> ................................. function showSTR(th, value) { th.parentNode.firstChild.replaceData(0, value.length, value); } 0

Как скрыть номер телефона XXX XXX а при клике показать

Решение