Сдвигать только текст-заполнитель в положение вверх при вводе пользователем текста в текстовом поле поля ввода

#php #jquery #html #css

#php #jquery #HTML #css

Вопрос:

У меня есть форма регистрации, в которой у меня есть несколько полей ввода с текстом-заполнителем. У меня нет никакой метки для поля ввода, поскольку у меня есть заполнитель. Я хочу сдвигать текст-заполнитель на вверх, когда пользователь вводит текст.. Что я должен добавить в свой css-файл, чтобы это произошло.

на рисунке ниже показана моя форма регистрации

форма регистрации

мой signup.php файл:

 <div class="loginForm">

        <form action="signUp.php" method="POST">
          <input type="text" name="firstName" placeholder="First name" autocomplete="off" required>
          <input type="text" name="lastName" placeholder="Last name" autocomplete="off" required>
          <input type="text" name="username" placeholder="Username" autocomplete="off" required>

          <input type="email" name="email" placeholder="Email" autocomplete="off" required>
          <input type="email" name="email2" placeholder="Confirm email" autocomplete="off" required>
          <input type="password" name="password" placeholder="Password" autocomplete="off" required>
          <input type="password" name="password2" placeholder="Confirm password" autocomplete="off" required>

          <input type="submit" name="submitButton" value="SUBMIT">
        </form>

      </div>
  

мой css-файл, который я пробовал:

 .signInContainer .column form input[type="text"],
.signInContainer .column form input[type="email"],
.signInContainer .column form input[type="password"] {
  font-size: 14px;
  margin: 10px 0;
  border: none;
  border-bottom: 1px solid #dedede;
  box-shadow: none;
  transition: all .8s;
}

.signInContainer .column form input[type="text"]:focus,
.signInContainer .column form input[type="email"]:focus,
.signInContainer .column form input[type="password"]:focus {

  outline: none;
  transform: translateY(-3px);
  border-bottom: 1px solid #464646;
}
  

Комментарии:

1. Я почти уверен, что это невозможно без javascript. Вы согласны с использованием javascript?

2. да, у меня нет проблем

3. Только что добавлено решение с использованием чистого HTML CSS (не хвастаюсь, просто привлекаю внимание к возможному решению)

4. Это можно сделать, используя только CSS, но мы немного изменили структуру, например, переместили заполнитель в метку. Вы согласны с изменениями? Спасибо

5. @HassanSiddiqui не может видеть файл, который вы изменили

Ответ №1:

CSS-решение: для этого вам понадобится label , а также немного разметки и браузер webkit.

 .container {
  position: relative;
  padding-top: 25px;
  margin-top: 10px;
}

.input-text {
  padding: 10px 5px;
}


/* the second part of the trick is that you place your label to
look like a placeholder */

label.move-out {
  position: absolute;
  top: 35px;
  left: 15px;
  color: lightgrey;
  transition: top 0.4s, left 0.4s
}


/* :placeholder-shown now works with an "empty" placeholder and a
correctly positioned label, and also keeps the label at position,
when data is in the input field */


/* :-webkit-autofill is there if Chrome wants to fill your input
box automatically */

input:focus label.move-out,
input:not( :placeholder-shown) label.move-out,
input:-webkit-autofill label.move-out {
  top: 0px;
  left: 0px;
  transition: top 0.4s, left 0.4s;
  color: black;
}  
 <div class="container">
  <!-- the first part of the trick is that you create an "empty"
  placeholder attr -->
  <input id="i1" class="input-text" type="text" placeholder=" " />
  <label class="move-out" for="i1">Label 1</label>
</div>
<div class="container">
  <!-- the first part of the trick is that you create an "empty"
  placeholder attr -->
  <input id="i2" class="input-text" type="text" placeholder=" " />
  <label class="move-out" for="i2">Label 2</label>
</div>  

Важно размещать label ПОСЛЕ поля ввода, поскольку в CSS есть селектор для выбора элемента после другого элемента ( element element ), но нет селектора для выбора элемента перед другим.

Ответ №2:

У вас может быть пустая метка (которая не будет отображаться в отображаемом выводе, поскольку она пустая), и когда вы вводите что-либо во ввод, измените значение метки на заполнитель вашего ввода.

 document.getElementById("input_text").addEventListener("keydown", function() {
  document.getElementById("text").innerHTML = document.getElementById("input_text").placeholder;
});  
 <label id="text"></label>
<input type="text" id="input_text" placeholder="Type here" />