Я нашел альтернативу с помощью ссылок mailto


Как сделать кнопку «Нажмите, чтобы скопировать» для электронной почты.

Итак, я нашел альтернативный способ размещения адреса электронной почты на вашем сайте без mailto ссылок с помощью JavaScript. Это также может устранить спам, рассылаемый ботами, потому что они собирают любой адрес электронной почты на сайтах для маркетинга (не знаю, мне это кажется эффективным).

Туториал 📝

  • Добавьте якорную ссылку в HTML. Мы добавим getEmail(), когда пользователь щелкнет по ссылке.
<div class="container">
  <a id="tooltip" onclick="getEmail()">Please enable JavaScript</a>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Мы придадим стиль нашей кнопке. Просто для хорошего внешнего вида.
a {
    background-color: #222;
    border-radius: 0.25em;
    padding: 6px 8px 6px 8px;
    font-size: 6em;
    color: white;
    text-decoration: none;
    transition: all 170ms ease;
    font-family: monospace;
    cursor: pointer;
    user-select: none;   
}

a:hover {
    background-color: lighten(#222, 10%);
    text-decoration: none;
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Наконец, мы добавим скрипт, который заставит письмо копироваться в буфер обмена пользователя. Кажется, что это много, но я объяснил, как это работает, в комментариях к коду.
document.getElementById("tooltip").innerHTML = 'Click to copy';
function getEmail() {
    // this is the reversed email because this will avoid bots to harvest it (unless they are smart lol)
    let email = "moc.elpmaxe@olleh";

    // this will reverse your email so it will show as hello@example.com

    let tempInput = document.createElement("INPUT");
    document.body.appendChild(tempInput);
    tempInput.setAttribute("value", email.split("").reverse().join(""));
    tempInput.select();
    tempInput.setSelectionRange(0, 99999);
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    // it will change the content inside the element to "Copied!"

    var tooltip = document.getElementById("tooltip");
    document.getElementById("tooltip").innerHTML = "Copied!";

    // it will only show the "Copied!" message for 2 seconds
    setTimeout(() => {
        document.getElementById("tooltip").innerHTML = "Click to copy";
    }, 2000);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Дополнительный совет! 💡

Вы видите, почему я поместил «Пожалуйста, включите JavaScript» в HTML? Вот что увидит пользователь, если отключит JavaScript в своем браузере! И именно поэтому я добавил строку «Нажмите, чтобы скопировать» в JavaScript, потому что он покажет этот текст, если у пользователя есть JavaScript, но не покажет, если он отключен.

<div class="container">
  <a id="tooltip" onclick="getEmail()">Please enable JavaScript</a>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Окончательный результат

Оцените статью
devanswers.ru
Добавить комментарий