jquery - 聚焦和不聚焦时的标签移动

Question

我想弄清楚如何使标签显示在文本框内并将标签移动到周边。我想要这个的一个例子是 https://www.discover.com/ 的登录屏幕当您在用户 ID 或密码框内单击时，您会看到标签随着您聚焦和聚焦而调整。

https://jsfiddle.net/bobrierton/Ls1c4fdj/

<div class="input-wrapper userid-wrapper">
    <label for="userid-content" class="user-id-label">User ID</label>
    <input type="text" class="form-control userid user-id-input" name="userID" id="userid-content" aria-required="true" data-toggle="popover" data-content="Please enter your User ID" maxlength="16" />
</div>
<div class="input-wrapper password-wrapper">
    <label for="password-content" class="password-label">Password</label>
    <input type="password" class="form-control password password-input" name="password" id="password-content" aria-required="true" data-toggle="popover" data-content="Please enter your Password" maxlength="32"/>
</div>

有人可以帮助我如何移动标签吗？

Answer 1

一种方法...

1. 将标签设置为 position: absolute，这会将其从文档流中取出，并将其很好地放置在 input 中。
2. 使用 margin 为 input 留出一些空间，以便为标签移动留出空间。
3. 利用:focus-within。当 input 具有 focus 时，可以定位标签。
4. 设置标签 以执行您需要的操作。在下面的示例中，我缩小了字体大小并根据您问题中的示例重新定位了它。

fiddle

.input-wrapper {
  position: relative;
}

.input-wrapper label {
  position: absolute;
  margin: 1em;
  transition: .5s ease-in-out;
  top: 0;
}

.input-wrapper input {
  margin: 1em;
}

.input-wrapper:focus-within label {
  font-size: .8em;
  top: -1em;
}

<div class="input-wrapper userid-wrapper">
  <label for="userid-content" class="user-id-label">User ID</label>
  <input type="text" class="form-control userid user-id-input" name="userID" id="userid-content" aria-required="true" data-toggle="popover" data-content="Please enter your User ID" maxlength="16" />
</div>
<div class="input-wrapper password-wrapper">
  <label for="password-content" class="password-label">Password</label>
  <input type="password" class="form-control password password-input" name="password" id="password-content" aria-required="true" data-toggle="popover" data-content="Please enter your Password" maxlength="32" />
</div>