mailto 링크가 있는 대안을 찾았습니다.

이메일에 대한 "복사하려면 클릭" 버튼을 수행하는 방법.

그래서 JavaScript를 사용하여 mailto 링크 없이 웹사이트에 이메일 주소를 입력하는 다른 방법을 찾았습니다. 이것은 또한 마케팅을 위해 웹사이트에서 이메일 주소를 수집하기 때문에 봇이 보낸 스팸 이메일을 제거할 수 있습니다.

튜토리얼 📝

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 [email protected]

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

추가 팁! 💡

HTML에 "JavaScript를 활성화하십시오"를 입력한 이유를 아십니까? 브라우저에서 JavaScript를 비활성화한 경우 사용자에게 표시되는 내용입니다! 그래서 JavaScript에 "복사하려면 클릭"문자열을 추가했습니다. 사용자가 JavaScript를 사용하는 경우 해당 텍스트를 표시하지만 비활성화한 경우에는 표시하지 않기 때문입니다.

<div class="container">
  <a id="tooltip" onclick="getEmail()">Please enable JavaScript</a>
</div>

최종 결과