引导浮动标签

什么是引导浮动标签？

引导浮动标签是一种常见的用户界面设计元素，它可以在输入框中提示用户应输入的内容，并在用户输入时自动消失。这个提示文字通常是浮动在输入框上方的标签，以便更好地利用页面上的空间并提高用户体验。

引导浮动标签的实现方式

HTML结构

引导浮动标签的 HTML 结构通常是一个包含两个元素的容器。第一个元素是输入框元素，第二个元素是浮动标签元素。例如：

<div class="form-group">
  <input type="text" class="form-control" id="username">
  <label for="username">用户名</label>
</div>

CSS样式

使用 CSS 样式可以实现以下功能：

1. 设置标签的样式和位置
2. 输入框由于有浮动标签的存在，可能需要调整位置
3. 根据用户输入状态来动态更改浮动标签的位置和样式

.form-group {
  position: relative;
}
.form-group label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;  /* 标签文字大小 */
  color: #999;  /* 标签文字颜色 */
  transition: all .2s ease-out; /* 动画效果 */
  pointer-events: none; /* 使标签不响应事件 */
}
.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
  top: -10px;  /* 输入框获得焦点或者有内容时，浮动标签向上移动 */
  font-size: 10px;  /* 标签文字缩小 */
  color: #008cba;  /* 标签文字颜色变为蓝色 */
}
.form-control {
  height: 40px;  /* 输入框高度 */
  padding-top: 20px;  /* 输入框上边距，保证输入内容不被遮挡 */
}

JavaScript脚本

JavaScript 脚本通常用于初始化浮动标签。例如：

const inputs = document.querySelectorAll(".form-control");
inputs.forEach((input) => {
  input.addEventListener("focus", (e) => {
    e.target.previousElementSibling.classList.add("focus");
  });
  input.addEventListener("blur", (e) => {
    if (e.target.value === "") {
      e.target.previousElementSibling.classList.remove("focus");
    }
  });
});

结语

引导浮动标签是一种优化用户体验的重要元素，它提醒用户输入内容并减少了输入框所占据的空间。通过 HTML、CSS 和 JavaScript 的灵活运用，我们可以轻松地实现引导浮动标签。