Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как скрыть часть номера телефона? (https://javascript.ru/forum/dom-window/74439-kak-skryt-chast-nomera-telefona.html)

LADYX 12.07.2018 10:14

Как скрыть часть номера телефона?
 
Добрый день!
Подскажите, пожалуйста, как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать? Благодарю!
<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span>

Nexus 12.07.2018 10:38

<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>

Dilettante_Pro 12.07.2018 10:53

<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>

LADYX 12.07.2018 11:10

Nexus,
Dilettante_Pro,
приветствую вас!
Нет, немного не то, нужно не меняя html
<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span>

Nexus 12.07.2018 11:19

Цитата:

Сообщение от LADYX
не меняя html

слишком геморойно.

рони 12.07.2018 11:25

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>

Nexus 12.07.2018 11:30

На счет кроссбраузерности не уверен.
<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

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>

LADYX 12.07.2018 11:48

Nexus,
да, этот вариант то что нужно, все работает, спасибо!
рони,
и вам спасибо!

LADYX 12.07.2018 12:00

Nexus,
я прошу прощения, пытаюсь присвоить отдельный класс
item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>');

но скрипт перестает работать. Что я делаю не правильно?


Часовой пояс GMT +3, время: 22:57.