Bootstrap 4浮动标签异常：移除required后标签仍悬浮/加载即浮动

问题根源 #

页面加载后无required属性的输入框标签直接上浮，核心原因有两个：

1. CSS中使用:valid伪类触发标签上浮，但无required的空输入框默认处于valid状态，导致页面初始化时就触发了上浮样式。
2. JS未处理页面初始化时的标签状态，且失焦事件的判断逻辑不严谨。

修复方案 #

1. 调整CSS：用自定义类替代:valid伪类 #

移除依赖:valid的样式规则，改用自定义.filled类来控制标签上浮的触发条件：

.appointment {
  padding-top: 49px;
  margin-bottom: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

a:hover {
  color: blue;
  transition: .5s;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ced4da;
  position: relative;
  z-index: 1;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.2s ease-out all;
  z-index: 2;
  border: 1px solid transparent;
  padding-left: 10px;
}

/* 替换:valid为.filled类 */
.form-group input:focus,
.form-group input.filled {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input.filled+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}

2. 完善JS逻辑：处理初始化和输入状态 #

在页面加载时就根据输入框的required属性和内容状态设置标签样式，同时修正失焦事件的判断逻辑：

$(document).ready(function() {
  // 页面初始化：设置初始标签状态
  $('.form-group input').each(function() {
    const $input = $(this);
    const $label = $input.siblings('label');
    // 必填项或输入框有值时，激活标签上浮状态
    if ($input.attr('required') || $input.val().trim() !== '') {
      $input.addClass('filled');
      $label.addClass('active');
    }
  });

  // 输入框聚焦时激活状态
  $('.form-group input').on('focus', function() {
    $(this).addClass('filled').siblings('label').addClass('active');
  });

  // 输入框失焦时判断是否移除状态
  $('.form-group input').on('blur', function() {
    const $input = $(this);
    const $label = $input.siblings('label');
    // 非必填且无内容时，恢复标签默认位置
    if (!$input.attr('required') && $input.val().trim() === '') {
      $input.removeClass('filled');
      $label.removeClass('active');
    }
  });
});

3. 保留原HTML结构 #

HTML部分无需修改，继续使用原有结构即可：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="firstname" class="form-control" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="col">
        <input type="text" id="middlename" name="middlename" class="form-control">
        <label for="middlename">Middle Name</label>
      </div>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="lastname">Last Name</label>
      </div>
    </div>
  </div>
  <div class="text-center">
    <label>
      <a href="{{ route('index') }}"><i class="icofont-bubble-left"></i> Back to Home</a>
    </label>
  </div>
  <br>
</form>

效果验证 #

• 有required属性的输入框：页面加载时标签保持上浮状态，符合必填项的交互逻辑。
• 无required属性的输入框：页面加载时标签处于输入框内，聚焦时上浮，失焦且无内容时回到原位，完全符合需求。

内容的提问来源于stack exchange，提问作者Bryan Clerigo