Как сделать, чтобы при клике показывался полностью телефон?
Добрый день!
Помогите пожалуйста с проблемой. Нужно сделать, чтобы при клике показывался полностью телефон. Изначально должен не полностью отображаться, как собственно и получилось с помощью добавления градиента в css. Но если добавить на этот класс клик, то градиент исчезает только нажатии, мышку отпускаешь, градиент снова появляется. Как я понимаю, одним css не обойтись. Как можно сделать, чтобы достаточно клика и телефон отобразился полностью?
<a class="phone" href="tel:+74994999999">+7 (499) 499-99-99</a> |
<a class="phone" href="tel:+74994999999">+7 (499) 499-99-99</a>
.phone { overflow: hidden; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%); } .phone:active { color: inherit; } |
.phone { overflow: hidden; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%); } .phone:active { color: inherit; }
Дополнительно:
А какой в этом смысл?
Обычно такое делают, чтоб скрыть телефон от ботов, но в данном случае для ботов телефон окажется полностью виден, а вот обычные юзеры получат ненужный дискомфорт в виде лишнего клика.
Ответы:
snippet
Не нужен здесь скрипт https://codepen.io/herr-imko/pen/MWzrNee
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы при клике на номер телефона он отображался полностью, можно воспользоваться JavaScript. Ниже приведен пример кода, который позволит вам реализовать данную функциональность.
```html
Номер телефона: 1234567890
document.addEventListener('DOMContentLoaded', function() {
let phoneElement = document.querySelector('.phone');
let phone = phoneElement.innerText;
phoneElement.addEventListener('click', function() {
phoneElement.innerText = phone;
});
});
```
В данном примере мы создаем абзац с номером телефона, который изначально отображается сокращенным видом. При клике на него с помощью JavaScript мы заменяем текст на полный номер телефона.
Вы также можете стилизовать элементы по своему усмотрению с помощью CSS, чтобы сделать отображение номера телефона более привлекательным и удобочитаемым для пользователей.
Надеюсь, данный код поможет вам решить вашу проблему с отображением номеров телефонов на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.