用户在输入字段文本框中键入内容时，仅将占位符文本上移

Question

我有一个注册表单，其中有一些带有占位符文本的输入字段。我没有占位符，所以没有用于输入字段的标签。我想在用户键入内容时将占位符文本向上移动。我应该在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;
}

Answer 1

您可能有一个空标签（由于它为空，因此不会显示在渲染的输出中），当您在输入中键入 anything 时，将标签的值更改为占位符输入。

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" />

Answer 2

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）之后的元素，但是没有选择器可以选择先选择一个元素。