Как скрыть номер телефона 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);
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

	Как скрыть номер телефона XXX XXX а при клике показать 15.05.2016, 18:25. Показов 29132. Ответов 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 а при клике показать

Решение