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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

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

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

Решение