|
|
12.07.2018, 10:14
|
 |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Как скрыть часть номера телефона?
Добрый день!
Подскажите, пожалуйста, как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать? Благодарю!
<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span>
|
|
12.07.2018, 10:38
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
<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>
|
|
12.07.2018, 10:53
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
<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>
|
|
12.07.2018, 11:10
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Nexus,
Dilettante_Pro,
приветствую вас!
Нет, немного не то, нужно не меняя html
<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span>
|
|
12.07.2018, 11:19
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
Сообщение от LADYX
|
|
не меняя html
|
слишком геморойно. |
|
12.07.2018, 11:25
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
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>
|
|
12.07.2018, 11:30
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
На счет кроссбраузерности не уверен.
<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>
|
|
12.07.2018, 11:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
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>
|
|
12.07.2018, 11:48
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Nexus,
да, этот вариант то что нужно, все работает, спасибо!
рони,
и вам спасибо!
|
|
12.07.2018, 12:00
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Nexus,
я прошу прощения, пытаюсь присвоить отдельный класс
item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>');
но скрипт перестает работать. Что я делаю не правильно?
|
|
|
|
