Как скрыть часть номера телефона?
Добрый день!
Подскажите, пожалуйста, как можно скрыть часть номера телефона (например, последние четыре цифры заменить на 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>'); но скрипт перестает работать. Что я делаю не правильно? |
| Часовой пояс GMT +3, время: 13:18. |