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>');

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

Nexus 12.07.2018 12:01
LADYX, html-код вставляете как текст в текстовый узел.

LADYX 12.07.2018 12:09
Nexus,
так вот же:
item.textContent=item.textContent.replace(item.__hiddenPart,'<span class='phone_number_xxxx'>xxxx</span>');

или я неправильно понимаю?

Nexus 12.07.2018 12:16
LADYX, вы значение свойства textContent изменяете, html будет в обычный текст преобразован.
item - ссылка на текстовый узел. Как в него html затолкать - не представляю.
Можно на основе этого элемента создать span и заменить текст этим span'ом и дальше работать с ним.

рони 12.07.2018 12:19
Цитата:
Сообщение от LADYX
,'<span class='phone_number_xxxx'>xxxx</span>');
внутри строки и снаружи должны быть разные кавычки или внутри \'

LADYX 12.07.2018 12:20
Nexus,
что-то типа этого?
$(".phone_number").html(function(index, text) {
	return text.replace(new RegExp("xxxx", 'g'), "<span class='phone_number_xxxx'>xxxx</span>")
});

Nexus 12.07.2018 12:29
LADYX, так listener'ы отвалятся, но можете попробовать.

LADYX 12.07.2018 12:33
Nexus,
ну да, замена идет, но при попытке показать номер неудача

j0hnik 12.07.2018 13:07 
<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>

Dilettante_Pro 12.07.2018 13:21
Еще вариант
<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>

j0hnik 12.07.2018 13:34
Dilettante_Pro,
:lol:

j0hnik 12.07.2018 13:54
<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="" /&gt;\'=);
			var img = el.querySelector('img');
			btn.onclick = e => img.style.display = 'none';
		});
</script>

j0hnik 12.07.2018 14:02
<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>

Ermite 13.07.2018 23:31
Хотелось коротко, получилось как всегда)

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

senex 16.07.2018 12:12
Мой ответ уже не актуален, но все же отвечу: в яваскрипт ковычки не могут находиться внутри других ковычек такого же типа. Если внешние ковычки одинарные, то внутри нужно ставить двойные, и наоборот. Или экранировать их обратным слэшем.

'<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"/>

Dilettante_Pro 16.07.2018 12:23
Цитата:
Сообщение от senex
Мой ответ уже не актуален
Насчет кавычек - смотрите пост 14 в этой теме.
По основной части не столько не актуален, сколько не удовлетворяет условию - не менять html.


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