Маска оригинального электронного письма на странице регистрации с использованием Javascript - PullRequest
Новая
       66

Маска оригинального электронного письма на странице регистрации с использованием Javascript

0 голосов
/ 08 января 2019

Мне нужно настроить страницу, которая позволяет пользователям регистрироваться, используя свою электронную почту, но в качестве требования электронная почта не должна быть "видимой" для человеческого глаза, я думаю, должен быть лучший способ сделать это , но до сих пор я придумал эту опцию, используя 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

1 Ответ

0 голосов
/ 08 января 2019

Вы можете указать тип входного тега password: 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>
...