当需要删除浮动标签效果时也删除

问题描述 投票：0回答：2

有没有一种方法可以用于 Bootstrap 4 上的浮动标签，当我删除输入上所需的标签时，标签仍位于边框顶部。

$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});
.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;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input:valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}
<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>

正如您在我的脚本中看到的那样，我不知道什么是不正确的或我缺少的东西，为什么标签已经浮动，即使它重新加载或没有焦点。

javascript html jquery css bootstrap-4
2个回答
0
投票

在您的演示中，您缺少 Bootstrap 的 CSS，请添加以下行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});
.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;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input:valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>

0
投票

最简单的解决方法（恕我直言） - 修改选择器，使用类 

.valid
而不是 
:valid
伪类，然后根据输入字段是否为空在输入字段本身上切换该类。

$(document).ready(function() {
  $('.form-group input').on('blur', function() {
    $(this).toggleClass('valid', $(this).val() !== '');
  });
});
.appointment {
  padding-top: 49px;
  margin-bottom: 30px;
}

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

.form-group .col {
  position: relative;
}

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;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input.valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.