Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2018, 10:14
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

Как скрыть часть номера телефона?
Добрый день!
Подскажите, пожалуйста, как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать? Благодарю!
<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span>
Ответить с цитированием
  #2 (permalink)  
Старый 12.07.2018, 10:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,280

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.07.2018, 10:53
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,533

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.07.2018, 11:10
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

Nexus,
Dilettante_Pro,
приветствую вас!
Нет, немного не то, нужно не меняя html
<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span>
Ответить с цитированием
  #5 (permalink)  
Старый 12.07.2018, 11:19
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,280

Сообщение от LADYX
не меняя html
слишком геморойно.
Ответить с цитированием
  #6 (permalink)  
Старый 12.07.2018, 11:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,377

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>
Ответить с цитированием
  #7 (permalink)  
Старый 12.07.2018, 11:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,280

На счет кроссбраузерности не уверен.
<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>
Ответить с цитированием
  #8 (permalink)  
Старый 12.07.2018, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,377

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>
Ответить с цитированием
  #9 (permalink)  
Старый 12.07.2018, 11:48
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

Nexus,
да, этот вариант то что нужно, все работает, спасибо!
рони,
и вам спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 12.07.2018, 12:00
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 174

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть img, если src пустой? Gosha Ponomaryov Events/DOM/Window 7 23.01.2015 16:36
Как скрыть все DIV кроме заданного ID при клике? sibfox777 Элементы интерфейса 1 24.11.2014 17:16
Как айти часть слова и удалить её? neutron jQuery 6 15.02.2013 14:44
Как скрыть обработчик HTML-формы с помошью JavaScript? Мишаня Общие вопросы Javascript 5 15.06.2009 04:40
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 06:55