1

У меня есть поле ввода текста. Есть label, который находится в этом поле. Когда нажимаю на поле для ввода текста - label поднимается вверх и я ввожу свой текст, но после ввода(т.е., когда мышей кликаю где-то на экране) label опускается на своё место и, таким образом, падает на введённый текст. Помогите сделать так, чтобы при заполненном поле label оставался на своём месте.

P.S. JS код отсутствует, но если он необходим, тогда давайте на чистом JS.

input {
  margin: 50px;
  width: 17%;
}
label {
  margin: 50px;
  position: absolute;
  left: 5px;
}
input:focus ~ label, input.used ~ label {
  top: -20px;
}
<!DOCTYPE html>
<html><head>
  <link href="./text.css" rel="stylesheet"></head>
<body>
  <input type="text" id="text"><span class="highlight"></span><span
    class="bar"></span>
  <label for="text">TEXT</label>
</body></html>

2 ответа 2

5

1. Если только средствами css.

Задаем input атрибут required и в css условие input:focus ~ label, input:valid ~ label { ... }:

* {
  box-sizing:border-box;
}

.form-group {
  position: relative;
  width: 50%;
  padding: 50px;
}

input {
  width: 100%;
  height: 30px;
}

label {
  position: absolute;
  left: 55px;
  top: 55px;
  
  transition:all .2s ease-in-out;
}

input:focus ~ label, input:valid ~ label {
  top: 20px;
  color:green;
}
<form>
  <div class="form-group">
    <input type="text" id="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="text">TEXT</label>
  </div>
</form>

2. Вариант с использованием jquery (если кому-нибудь другому понадобится):

$('input').on('focusin', function() {
  var 
  $this = $(this),
      row = $this.closest('.form-group'),
      label = row.find('label');

  row.addClass('active');
});

$('input').on('focusout', function() {
  var 
  $this = $(this),
      row = $this.closest('.form-group'),
      label = row.find('label'),
      val = this.value;


  if (!val) {
    row.removeClass('active');
  }
});
* {
  box-sizing:border-box;
}

.form-group {
  position: relative;
  width: 50%;
  padding: 50px;
}

input {
  width: 100%;
  height: 30px;
}

label {
  position: absolute;
  left: 55px;
  top: 55px;
  
  transition:all .2s ease-in-out;
}

.active label {
  top: 20px;
  color:green;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<form>
  <div class="form-group">
    <input type="text" id="text">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="text">TEXT</label>
  </div>
</form>

1
  • Спасибо огромное братан, мне помог этот кусок кода, на который я изменил свой: input:focus ~ label, input:valid ~ label 23 янв 2019 в 11:19
3

input.addEventListener("input", function() {
  this.parentNode.dataset.top = this.value ? 1 : 0
})
label {
  margin-top: 50px;
  display: inline-block;
  position: relative;
  padding: 5px;
  border: 1px solid black;
  cursor: text;
  font-size: 14px;
}

label[placeholder]::before {
  content: attr(placeholder);
  position: absolute;
  opacity: .5;
}

label[data-top="1"]::before {
  top: -2px;
  left: 2px;
  transform: translateY(-100%)
}

label[placeholder] input {
  border: none;
  font: inherit;
  outline: none;
  padding: 0px;
}
<label placeholder="Write me...">
  <input type="text" id="input">
</label>

1
  • Спасибо огромное братан. 23 янв 2019 в 11:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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