I use some server-side email obfuscation and do not want to put the full email address in a mailto:
. Within the element, I call a js function that fetches the email address from the server, and calls (another) mailto:
link from without the js function.
I first kept the href
empty (and I think it's the same when putting #
), but when hoovering over the link, the status bar of the browser shows a link to the current page, and it looks just neater (and expected behavior) to show a mailto:
link in the status bar, but just with the firstname of the person, and not with a valid email address.
HTML:
<a href="mailto:johny" onclick= "sendmail('jj'); return false;" title="Send email">
JS:
function sendmail(dest) {
var link = "";
fetch('/returnmailstring.php?dec='+code+'&input='+dest)
.then(function(response) {
response.text()
.then(function(text) {
link = text;
if (link.length > 2) {
if(window.confirm('Send email to \n'+link+' ?')) {
window.location.href = link;
}
}
})
})
}
So my question is whether it is acceptable to have a double/identical functionality, but using two different methods ? I would have expected that maybe two "new mail" windows would be opened, or some other weird behavior, but everything actually works fine. But I cannot imagine that this is standards compliant, and that it would work fine in all browsers/devices?
A related question is about what should happen when user clicks on the link. I currently implemented a confirmation box, so user can choose OK
to actually proceed with sending the email (using the default email client), or just copy the email address from the box (and paste into another mail client, e.g. gmail), and Cancel
to return to the page. The alternative would be to skip the confirmation box and directly open the mail client after the click. Are there UX rules / standards to follow, or is it acceptable to use such confirmation box?