使用Javascript在注册页面屏蔽原始电子邮件_Javascript_Forms_Data Masking

使用Javascript在注册页面屏蔽原始电子邮件

javascript forms

使用Javascript在注册页面屏蔽原始电子邮件,javascript,forms,data-masking,Javascript,Forms,Data Masking,我需要设置一个页面，允许用户使用他们的电子邮件进行注册，但作为一项要求，电子邮件不应该对人眼“可见”，我想应该有更好的方法来做到这一点，但到目前为止，我使用JQuery提出了这个选项：我创建了一个假控件，用于处理掩蔽并捕获文本，以便可以将其分配给隐藏字段（以便以前的工作代码可以在不进行更改的情况下继续工作） var emailControl=$（“#eMail”）； var firstHalf=“”； var secondHalf=“”； var fullMail=“”； emailContr

我需要设置一个页面，允许用户使用他们的电子邮件进行注册，但作为一项要求，电子邮件不应该对人眼“可见”，我想应该有更好的方法来做到这一点，但到目前为止，我使用JQuery提出了这个选项：

我创建了一个假控件，用于处理掩蔽并捕获文本，以便可以将其分配给隐藏字段（以便以前的工作代码可以在不进行更改的情况下继续工作）

var emailControl=$（“#eMail”）；
var firstHalf=“”；
var secondHalf=“”；
var fullMail=“”；
emailControl.keyup（函数（e）{
var控制=e.currentTarget；
var currentText=$（control.val（）；
如果（currentText.length==0）{
全邮=“”；
上半部分=“”；
后半部分=“”；
$（control.attr（'type'，'password'）；
}
否则{
var components=currentText.split（“@”）；
var hiddenPart=“•”。重复（组件[0]。长度）；
检测变化（当前文本）；
if（components.length==2）{
secondHalf='@'+组件[1]；
}
$（control.attr（'type'，'text'）；
$（对照）.val（hiddenPart+secondHalf）；
fullMail=上半部分+下半部分；
}
});
函数检测更改（原始文本）{
变量位置=原始文本索引（'@'）；
如果（位置==-1）{
位置=原始文本长度；
}
对于（变量i=0；i


我在这里成功地使它工作了：您可以给输入标记类型password:type=“password”。
这可能会导致autofill发生一些不愉快的事情
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form>
     email: <input type="password" name="email">
  </form>
</body>
</html>


文件
电邮：

你也可以用CSS做类似的事情
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    input {
      -webkit-text-security: circle;
    }
  </style>
</head>
<body>
  <form>
    email: <input name="email">
  </form>
</body>
</html>


文件
输入{
-webkit文本安全性：圆圈；
}
电邮：
为什么不直接使用？它将隐藏他们键入的内容隐藏整个输入对用户来说太混乱，暗示至少部分文本提供了一些线索，因此它显示为：例如my******@gmail.com。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    input {
      -webkit-text-security: circle;
    }
  </style>
</head>
<body>
  <form>
    email: <input name="email">
  </form>
</body>
</html>