Как скрыть часть номера телефона?
Добрый день!
Подскажите, пожалуйста, как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать? Благодарю! <span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span> |
<div class="phone_number"> +7495333<span data-value="2211">xxxx</span> <span class="phone_number_active">Показать</span> </div> <div class="phone_number"> +7495333<span data-value="2211">xxxx</span> <span class="phone_number_active">Показать</span> </div> <script> [].forEach.call(document.querySelectorAll('.phone_number'),function(node){ node.querySelector('.phone_number_active').addEventListener('click',function(){ const nums=node.querySelector('[data-value]'); nums.textContent=nums.dataset.value; this.style.display='none'; }); }); </script> |
<span class="phone_number">+7495333<span class="mask">2211</span><span class="phone_number_active"> Спрятать</span></span> <script> var masked = document.querySelector(".mask").innerText; function closePhone() { document.querySelector(".mask").innerText = "XXXX"; document.querySelector(".phone_number_active").innerText = " Показать"; }; function openPhone() { document.querySelector(".mask").innerText = masked; document.querySelector(".phone_number_active").innerText = " Спрятать"; }; document.querySelector(".phone_number_active").onclick = function() { if(this.innerText == " Спрятать") closePhone(); else openPhone(); } </script> |
Nexus,
Dilettante_Pro, приветствую вас! Нет, немного не то, нужно не меняя html <span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span> |
Цитата:
|
LADYX,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .phone_number_active:before { content: "XXXX" } .phone_number_active:active:before { content: attr(text) } </style> </head> <body> <span class="phone_number">+7495333<span class="phone_number_active" text="2211"> Показать</span></span> </body> </html> |
На счет кроссбраузерности не уверен.
<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span> <span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span> <script> [].forEach.call(document.querySelectorAll('.phone_number'),function(node){ const item=node.firstChild; item.__hiddenPart=item.textContent.substr(-4); item.textContent=item.textContent.replace(item.__hiddenPart,'xxxx'); node.querySelector('.phone_number_active').addEventListener('click',function(){ item.textContent=item.textContent.replace('xxxx',item.__hiddenPart); this.style.display='none'; }); }); </script> |
LADYX,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .phone_number_active{ position: relative; margin-left:40px; } .phone_number_active:before { position: absolute; content: "XXXX"; left: -80px; background-color: #FFFFFF; margin-right:30px; } .phone_number_active:active:before { content: "" } </style> </head> <body> <span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span> </body> </html> |
Nexus,
да, этот вариант то что нужно, все работает, спасибо! рони, и вам спасибо! |
Nexus,
я прошу прощения, пытаюсь присвоить отдельный класс item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>'); но скрипт перестает работать. Что я делаю не правильно? |
LADYX, html-код вставляете как текст в текстовый узел.
|
Nexus,
так вот же: item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>'); или я неправильно понимаю? |
LADYX, вы значение свойства textContent изменяете, html будет в обычный текст преобразован.
item - ссылка на текстовый узел. Как в него html затолкать - не представляю. Можно на основе этого элемента создать span и заменить текст этим span'ом и дальше работать с ним. |
Цитата:
|
Nexus,
что-то типа этого? $(".phone_number").html(function(index, text) { return text.replace(new RegExp("xxxx", 'g'), "<span class='phone_number_xxxx'>xxxx</span>") }); |
LADYX, так listener'ы отвалятся, но можете попробовать.
|
Nexus,
ну да, замена идет, но при попытке показать номер неудача |
<style> .phone_number_xxxx{ padding-right:10px; } </style> <span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span><br> <span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span> <script> [].forEach.call(document.querySelectorAll('.phone_number'),function(el){ var hide = /(\d{4})[А-Я\s]/.exec(el.textContent)[1]; el.innerHTML = el.innerHTML.replace(hide, ''); var btn = el.querySelector('.phone_number_active'); btn.insertAdjacentHTML('beforebegin', '<span class="phone_number_xxxx">xxxx</span>'); var xxx = el.querySelector('.phone_number_xxxx'); btn.onclick = function(){ xxx.textContent = xxx.textContent.replace(/xxxx/, hide); }; }); </script> |
Еще вариант
<style> .phone_number { background: linear-gradient(to right, white 0%, black 50%); } .phone_number_active { background-color:white;} </style> <span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span> <script> document.querySelector(".phone_number_active").onclick = function() { document.querySelector(".phone_number").style.background = "white"; } </script> |
Dilettante_Pro,
:lol: |
<Creative mode ON>
<style> img{ position: relative; top: 0; left: -30px; } </style> <span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span><br> <span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span> <script> [].forEach.call(document.querySelectorAll('.phone_number'),function(el){ var btn = el.querySelector('.phone_number_active'); btn.insertAdjacentHTML(\'beforebegin\', \'<img src="https://javascript.ru/forum/image.php?u=40601&dateline=1424365279" alt="" />\'=); var img = el.querySelector('img'); btn.onclick = e => img.style.display = 'none'; }); </script> |
<Creative mode ON>
<style> .phone_number{ position: relative; display: block; text-align: right; top: 0; right: -40px; transition: 1s; } </style> <span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span><br> <span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span> <script> [].forEach.call(document.querySelectorAll('.phone_number'),function(el){ var btn = el.querySelector('.phone_number_active'); btn.onclick = e => el.style.right = '0'; }); </script> |
Хотелось коротко, получилось как всегда)
<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span><br> <span class="phone_number">+74953332011<span class="phone_number_active"> Показать</span></span> <script> (function() { const classNamePhone = 'span.phone_number'; const count = 4; // сколько чисел менять const hideText = "X".repeat(count); // каким символом менять document.querySelectorAll(classNamePhone).forEach((item) => { replaceNumber(item); item.lastChild.addEventListener("click", (e) => { const parent = e.target.parentElement; const fChild = parent.firstChild; if (!fChild.__hideNumber) { replaceNumber(e.target.parentElement); e.target.innerHTML = " Показать"; } else { fChild.nodeValue = fChild.nodeValue.replace(hideText, fChild.__hideNumber); fChild.__hideNumber = false; e.target.innerHTML = " Скрыть"; } }); }); function replaceNumber(item) { const val = item.firstChild.nodeValue; item.firstChild.__hideNumber = val.substr(-count); item.firstChild.nodeValue = val.substr(0, val.length - count) + hideText; } })(); </script> |
Мой ответ уже не актуален, но все же отвечу: в яваскрипт ковычки не могут находиться внутри других ковычек такого же типа. Если внешние ковычки одинарные, то внутри нужно ставить двойные, и наоборот. Или экранировать их обратным слэшем.
'<span class="phone_number_xxxx">xxxx</span>' '<span class=\'phone_number_xxxx\'>xxxx</span>' В отношении основного вопроса, то для задач "показать/скрыть" есть простое и практичное решение на чистом HTML/CSS - это связка <label> и скрытого checkbox: <style> .tel input, .tel input + span {display: none} .tel input:checked ~ span {display: none} .tel input:checked + span {display: inline} </style> <label class="tel"> <input type="checkbox"/> 99922<span>7777 Скрыть</span> <span>xxxx Показать</span> </label> Если нужно, чтобы клик срабатывал только один раз, навешиваем на чекбокс простой обработчик: <input type="checkbox" onchange="if (!this.checked) this.checked = true"/> |
Цитата:
По основной части не столько не актуален, сколько не удовлетворяет условию - не менять html. |
Часовой пояс GMT +3, время: 01:49. |