2

Как сделать, чтобы при заполненном инпут или фокусе, label поднялся выше или если пустой вернуть обратно?

.item-f{
    border-radius: 4px;
    border: 1px solid #DCECF4;
    width: 100%;
    height: 60px;
    position: relative;
}
input{
    border-radius: 4px;
    border: 1px solid #DCECF4;
    color: #81819F;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 14px;
    padding: 0 15px;
    width: 100%;
    height: 60px;
}
label{
    position: absolute;
    top: 8px;
    font-size: 14px;
    left: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
input:focus + label,
    input:valid + label {
      top: 0px;
    }
<div class="item-f required">
     <input type="text" name="city" value="Серг" class="item-label" id="input-city" />
     <label for="input-city">Имя</label>
</div>

вот так пробую сделать

const input = $('.item-label');

    input.addEventListener('.item-label', () => {
        if (input.value !== '') {
            input.classList.add('input_filled');
        } else {
            input.classList.remove('input_filled');
        }
    });

пишет

Uncaught TypeError: input.addEventListener is not a function
2
  • 1
    transform: translateY Commented 6 авг. 2019 в 8:22
  • label все ровно стоит на месте
    – Uvasya
    Commented 6 авг. 2019 в 8:25

3 ответа 3

4

на коленке быстренько состряпал, думаю, что логика будет вам понятна

const input = document.querySelector('input');

input.addEventListener('input', () => {
  if (input.value !== '') {
    input.classList.add('input_filled');
  } else {
    input.classList.remove('input_filled');
  }
});
form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-group {
  position: relative;
}

label {
  position: absolute;
  left: 10px;
  top: 0;
  transition: transform .3s ease;
}

input:focus + label, .input_filled + label {
  transform: translateY(-18px);
}
<form action="#">
  <div class="form-group">
    <input id="foo" type="text">
    <label for="foo">Test</label>
  </div>
</form>

UPD.

const inputs = [...document.querySelectorAll('input')];

inputs.forEach(input => {
  input.addEventListener('input', () => {
    if (input.value !== '') {
      input.classList.add('input_filled');
    } else {
      input.classList.remove('input_filled');
    }
  });
});
form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

label {
  position: absolute;
  left: 10px;
  top: 0;
  transition: transform .3s ease;
}

input:focus+label,
.input_filled+label {
  transform: translateY(-18px);
}
<form action="#">
  <div class="form-group">
    <input id="foo1" type="text">
    <label for="foo1">Test</label>
  </div>

  <div class="form-group">
    <input id="foo2" type="text">
    <label for="foo2">Test</label>
  </div>

  <div class="form-group">
    <input id="foo3" type="text">
    <label for="foo3">Test</label>
  </div>
</form>

8
  • это из-за версии jquery? input.addEventListener is not a function
    – Uvasya
    Commented 6 авг. 2019 в 8:30
  • @Uvasya, нет, значит просто не нашелся input) пример сделан исключено как ПРИМЕР, перерефакторите его под свою задачу
    – meine
    Commented 6 авг. 2019 в 8:33
  • подправил вопрос, как нужно, чтобы все элементы с инпутом .item-label
    – Uvasya
    Commented 6 авг. 2019 в 8:40
  • @Uvasya, обновил, вместо input ставите свой класс .item-label
    – meine
    Commented 6 авг. 2019 в 8:44
  • а подскажите, чтобы после загрузки страницы, скрипт проверял заполненность поля?
    – Uvasya
    Commented 6 авг. 2019 в 8:51
2

body {
  display: flex;
  justify-content: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 100px;
}

.column input {
  outline: none;
  border: none;
  border-bottom: 1px solid #9EA3B4;
  height: 30px;
  font-size: 16px;
  color: #9EA3B4;
  margin: 5px 0;
  width: 280px;
  background: transparent;
}

.column label {
  display: block;
  margin-bottom: 5px;
  color: #9EA3B4;
  transform: translateY(-32px);
  line-height: 16px;
  transition: 0.5s;
  pointer-events: none;
  padding-left: 5px;
}

.column input:focus+label,
.column input:valid+label {
  transform: translateY(-56px);
  font-size: 12px;
  padding: 0;
  color: #2196f3;
}
<div class='column'>
  <input type="text" id='name' pattern='(\S+|(\s*\S+\s*){0,}){0,}' required/>
  <label htmlFor="name">Имя </label>
</div>

Если нужно, чтобы при заполненном input label был вверху, поможет псевдокласс valid. Любое вводимое значение в input type='text' будет валидно.

P.S. Если у вас будет не только input с типом текста, но и другие, например, number - мой способ не поможет. Т.к. в таком инпуте лэйбл будет держаться только при вводе цифр

2
  • :valid отработает для текстового инпута даже если в нем не будет ничего. Пустая строка - тоже строка. Commented 6 авг. 2019 в 10:25
  • @Инквизитор, вы правы. Поставил другой паттерн - проблема решена) Commented 6 авг. 2019 в 11:11
0

В вашем случае селектор input:valid + label переписывает стиль селектора input. оставьте только input:focus + label

.item-f {
    border-radius: 4px;
    border: 1px solid #DCECF4;
    width: 100%;
    height: 60px;
    position: relative;
}

input {
    border-radius: 4px;
    border: 1px solid #DCECF4;
    color: #81819F;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 14px;
    padding: 0 15px;
    width: 100%;
    height: 60px;
}

label {
    position: absolute;
    top: 8px;
    font-size: 14px;
    left: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

input:focus + label {
  top: 0px;
}
<div class="item-f required">
     <input type="text" name="city" value="Серг" class="item-label" id="input-city" />
     <label for="input-city">Имя</label>
</div>

1
  • нужно, чтобы при заполненном input был вверху label
    – Uvasya
    Commented 6 авг. 2019 в 8:32

Ваш ответ

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

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