使用 HTML 和 JavaScript 在表单中隐藏电子邮件 ID

在网页开发中，经常需要在表单中输入邮箱地址。但是由于担心被恶意采集，很多网站都会将电子邮件 ID 隐藏起来，例如用星号代替部分字符或者加密。本文将介绍如何使用 HTML 和 JavaScript 来隐藏电子邮件 ID。

方法一：使用 JavaScript 加密电子邮件

在表单中输入一个完整的电子邮件地址，虽然方便，但是也很容易被恶意采集。为了防止这种情况发生，可以采用 JavaScript 加密电子邮件的方式来保护用户输入的信息。

下面是一个 JavaScript 加密电子邮件的例子：

function encryptEmail(email) {
  var result = "";
  for (var i = 0; i < email.length; i++) {
    result += "&#" + email.charCodeAt(i) + ";";
  }
  return result;
}
document.getElementById("email").value = encryptEmail("example@example.com");

这段 JavaScript 代码将把输入框中的 "example@example.com" 加密，变成 "example@example.com"，这样即使被恶意采集，也很难还原出原始的电子邮件地址。

方法二：使用 HTML 实现电子邮件隐藏

另一种方式是在 HTML 层面实现电子邮件的隐藏。可以用一个图像来代替电子邮件地址，而用 alt 属性存储真实的电子邮件地址。

下面是一个实现电子邮件隐藏的例子：

<a href="#" class="email-link" data-name="example" data-domain="example.com">
  <img src="email-icon.png" alt="example[at]example.com">
</a>
<script>
  var emailElements = document.querySelectorAll(".email-link");
  for (var i = 0; i < emailElements.length; i++) {
    var link = emailElements[i];
    var name = link.getAttribute("data-name");
    var domain = link.getAttribute("data-domain");
    var email = name + "@" + domain;
    link.setAttribute("href", "mailto:" + email);
    link.querySelector("img").setAttribute("alt", email);
  }
</script>

这段代码会将 alt 属性中的字符串替换成真实的电子邮件地址，同时将 href 属性设为 "mailto:example@example.com"，这样用户点击后就可以默认使用系统默认邮件客户端发送邮件。

以上就是使用 HTML 和 JavaScript 在表单中隐藏电子邮件 ID 的两种方式，开发人员可以根据实际需求选择适合自己的方案来保护用户的隐私信息。