使用Javascript在注冊頁面上屏蔽原始電子郵件

Question

我需要設置一個頁面，允許用戶使用他們的電子郵件進行注冊，但是作為一個要求，該電子郵件對於人眼來說不應是“可見”的，我想應該有一種更好的方法來進行此操作，但是到目前為止，我使用JQuery想到了這個選項：

我創建了一個偽造的控件來處理遮罩並捕獲文本，以便可以將其分配給隱藏字段（這樣以前的工作代碼將保持工作狀態而不進行更改）。

var emailControl = $("#eMail");
var firstHalf = "";
var secondHalf = "";
var fullMail = "";

emailControl.keyup(function(e){
  var control = e.currentTarget;
  var currentText = $(control).val();

  if (currentText.length == 0){
    fullMail = '';
    firstHalf = '';
    secondHalf = '';
    $(control).attr('type', 'password');
  }
  else{
    var components = currentText.split("@");
    var hiddenPart = "•".repeat(components[0].length);

    detectChanges(currentText);

    if (components.length == 2) {
      secondHalf = '@' + components[1];
    }

    $(control).attr('type', 'text');
    $(control).val(hiddenPart + secondHalf);
    fullMail = firstHalf + secondHalf;
  }
});

function detectChanges(originalText) {
  var position = originalText.indexOf('@');
  if (position == -1) {
    position = originalText.length;
  }

  for (var i = 0; i < position; i++){
    if (originalText[i] != "•"){
      firstHalf = firstHalf.substring(0, i) + originalText[i] + firstHalf.substring(i+1);
    }
  }
}

我確實設法在這里工作： https : //codepen.io/icampana/pen/KbegKE

Answer 1

您可以為輸入標簽提供密碼類型：type =“ password”。 自動填充可能會導致一些麻煩的事情發生。

<!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>

使用Javascript在注冊頁面上屏蔽原始電子郵件

問題描述

1 個解決方案

解決方案1
1 2019-01-08 02:44:09

使用Javascript在注冊頁面上屏蔽原始電子郵件

問題描述

1 個解決方案

解決方案1 1 2019-01-08 02:44:09

解決方案1
1 2019-01-08 02:44:09