Электронная почта с плавающей меткой jquery

Добрый день,

Я работаю над формой с плавающими метками. Ярлыки плавают нормально, за исключением поля ввода с type = email. Пользователь вводит текст в поле, и если он недействителен, когда пользователь переходит к следующему полю, метка перестает плавать. Электронная почта с плавающей меткой jquery

Я пробовал решения только css, такие как добавление псевдокласса .mat-input-external input: неверный + label, но в итоге класс применяется к каждой метке при загрузке страницы.

Вот мой jQuery:

$(function () {
     $('.mat-input-outer label').click(function () {
          $(this).prev('input').focus();
     });
     $('.mat-input-outer input').focusin(function () {
          $(this).next('label').addClass('active');
     });
     $('.mat-input-outer input').focusout(function () {
          if (!$(this).val()) {
               $(this).next('label').removeClass('active');
          } else {
               $(this).next('label').addClass('active');
          }
     });
});

И мой HTML:

<div class = "mat-input">
  <div class = "mat-input-outer">
    <input type = "text" placeholder = " " id = "name" name = "name" required>
    <label for = "Name" class = "">Name</label>
    <div class = "border"></div>
  </div>
</div>
<div class = "mat-input">
  <div class = "mat-input-outer">
    <input type = "email" placeholder = " " id = "email" name = "email" required>
    <label for = "email" class = "">Email Address</label>
    <div class = "border"></div>
  </div>
</div>

И, наконец, рабочий пример.

jquery html

10.09.2018 19:17

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

488

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените CSS, ниже у вас есть рабочий пример
На будущее! - css в большинстве случаев разрушит ваш скрипт jquery: /
Просто попробуйте использовать jquery для всего, если вы делаете интерактивные формы! :)

Заменить раздел с :действительный на этот

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
}

// Activate Floating Label - Input
$(function() {
  $('.mat-input-outer label').click(function() {
    $(this).prev('input').focus();
  });
  $('.mat-input-outer input').focusin(function() {
    $(this).next('label').addClass('active');
  });
  $('.mat-input-outer input').focusout(function() {
    if ($(this).val().length <= 0) {
      $(this).next('label').removeClass('active');
    } else {
      $(this).next('label').addClass('active');
    }
  });
});

.mat-input {
  margin: 2% auto;
  margin-bottom: 30px;
}

.mat-input-outer {
  display: table;
  width: 100%;
  position: relative;
	font-family: arial;
}

.mat-input-outer textarea {
  resize: none;
  display: inline-block;
  vertical-align: middle;
  margin-top: 16px;
  min-height: 0;
}

.mat-input-outer input {
  height: 50px;
}

.mat-input-outer input,
.mat-input-outer textarea {
  border-radius: 0;
  border: none;
  width: 100%;
  padding: 6px;
  color: #757575;
  font-family: "museo-sans", sans-serif;
  font-size: 16px;
  background: transparent;
	outline: none;
}

.mat-input-outer label {
  position: absolute;
  top: 12px;
  transition: .2s;
  color: #757575;
  cursor: text;
  margin-left: 6px;
}

.mat-input-outer .border {
  height: 1px;
  background: #757575;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
}

.mat-input-outer .border::before {
  content: " ";
  display: table;
  height: 2px;
  width: 0%;
  background: transparent;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  margin: 0 auto;
}

.mat-input-outer input:focus~.border,
.mat-input-outer textarea:focus~.border {
  background: transparent;
}

.mat-input-outer input:focus~.border::before,
.mat-input-outer textarea:focus~.border::before {
  width: 100%;
  background: #2B6FD7;
}

.mat-input-outer input:not(:placeholder-shown)~.border::before,
.mat-input-outer textarea:not(:placeholder-shown)~.border::before {
  width: 100%;
  background: #757575;
}

.mat-input-outer input:focus+label,
.mat-input-outer textarea:focus+label {
  top: -15px;
  color: #2B6FD7;
  opacity: 1;
  filter: alpha(opacity=100);
}

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "mat-input">
  <div class = "mat-input-outer">
    <input type = "text" placeholder = " " id = "name" name = "name" required>
    <label for = "Name" class = "">Name</label>
    <div class = "border"></div>
  </div>
</div>
<div class = "mat-input">
  <div class = "mat-input-outer">
    <input type = "email" placeholder = " " id = "email" name = "email" required>
    <label for = "email" class = "">Email Address</label>
    <div class = "border"></div>
  </div>
</div>

это изменяет цвет метки при вводе текста, а не при выходе из поля.

— 10.09.2018 19:51

Подождите, поцарапайте это - должно быть, кешировалось на моей стороне или что-то в этом роде. Работает как есть.

— 10.09.2018 19:53

Вы можете использовать это +: valid для цвета, но не используйте в нем Топ:, потому что это перезапишет его в большинстве браузеров.

— 10.09.2018 20:02

10.09.2018 19:48