关注不支持 Bootstrap 4 的标签元素

Question

我正在尝试在您关注 input 字段时向 label 添加 class。我正在使用 jQuery 1.12.4，Bootstrap 4.

$(function() {
  $('form :input').focus(function() {
    $('label[for="' + this.id + '"]').addClass('labelfocus');
  }).blur(function() {
    $('label[for="' + this.id + '"]').removeClass('labelfocus');
  })
});

.labelfocus { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <div class="form-group row">
    <div class="col-md-7">
      <label for="firstName">* First Name</label>
      <div class="input-group">
        <input type="text" name="firstName" class="form-control" required>
        <div class="valid-feedback">Great! You've done it.</div>
        <div class="invalid-feedback">Please add your first name.</div>
      </div>
    </div>
  </div>
</form>

Answer 1

您需要在输入字段中添加一个 ID。 for 属性链接到输入的 id 属性。

这是一个工作示例：

$(function () {
    $('form :input').focus(function() {
        $('label[for="' + this.id + '"]').addClass('labelfocus');
    })
    .blur(function() {
        $('label[for="' + this.id + '"]').removeClass('labelfocus');
    })
});

.labelfocus {
background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="needs-validation" novalidate>
<div class="form-group row">
    <div class="col-md-7">
        <label for="firstName">* First Name</label>
        <div class="input-group">
            <input type="text" name="firstName" id="firstName" class="form-control" required>
            <div class="valid-feedback">Great! You've done it.</div>
            <div class="invalid-feedback">Please add your first name.</div>
        </div>
    </div>
</div>

关注不支持 Bootstrap 4 的标签元素

Focus on label elements not working with Bootstrap 4

jquery

label

focus

version

bootstrap-4