0

Есть скрипт, который стилизирует поля input. Помогите доработать, а то немного коряво работает. Если value имеет значение (текст), нужно чтобы классы были присвоены как при фокусе, чтобы подсказка не появлялась и label не залазил на текст, когда поле не пустое. Наглядно в примере.

$('input').focus(function() {
  $(this).parents('.form-group').addClass('focused');
});
$('input').blur(function() {
  var inputValue = $(this).val();
  if (inputValue == "") {
    $(this).removeClass('filled');
    $(this).parents('.form-group').removeClass('focused');
  } else {
    $(this).addClass('filled');
  }
})
/* СТИЛИ ПОЛЕЙ ДЛЯ ВВОДА */

.form-group {
  position: relative;
  margin: 30px;
}

.form-label {
  position: absolute;
  left: 0;
  top: 8px;
  color: #555;
  z-index: 10;
  transition: transform 150ms ease-out, font-size 150ms ease-out;
}

.focused .form-label {
  transform: translateY(-125%);
  font-size: .75em;
}

.form-group input,
.form-group input {
  position: relative;
  padding: 12px 0px 5px 0;
  width: 100%;
  outline: 0;
  border: 0;
  box-shadow: 0 1px 0 0 #e5e5e5;
  transition: box-shadow 150ms ease-out;
}

.form-group input:focus {
  box-shadow: 0 2px 0 0 red;
}

.form-group input.filled {
  box-shadow: 0 2px 0 0 green;
}

.form-group .bmd-help,
.form-group input.filled+.bmd-help {
  display: none;
}

.form-group .bmd-help {
  position: absolute;
  left: 0;
  top: 2.8rem;
  font-size: .9em;
  color: #888;
  background: #fff;
  z-index: 10;
}

.focused .bmd-help {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group break">
  <label class="form-label" for="title">Название</label>
  <input type="text form-input" name="title" id="title" value="" class="wide text_uppercase ultrabold" required>
  <span class="bmd-help">Придумайте оригинальное название рецепта, название должно быть кратким и понятным!</span>
</div>

<div class="form-group break">
  <label class="form-label" for="title">Название</label>
  <input type="text form-input" name="title" id="title" value="Я заполнен! Но label меня перекрывает(" class="wide text_uppercase ultrabold" required>
  <span class="bmd-help">Придумайте оригинальное название рецепта, название должно быть кратким и понятным!</span>
</div>

1
  • Добавить проверку при выводе формы - если значение, которое заносится в input не пустое, то добавить родительскому элементу класс, аналогичный focused.
    – fixer
    17 мар 2020 в 15:16

1 ответ 1

0

Решение пришло само.

$('.form-group input').each(function() {
$(this).closest('.form-group').addClass('focused', !this.value);
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.