Сосредоточьтесь на элементах меток, не работающих с Bootstrap 4 - PullRequest
Новая
       16

Сосредоточьтесь на элементах меток, не работающих с Bootstrap 4

0 голосов
/ 01 октября 2018

Я пытаюсь добавить класс к label, когда вы сосредотачиваетесь на поле input.Я использую 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>

1 Ответ

0 голосов
/ 01 октября 2018

Вам необходимо добавить идентификатор в поле ввода.Атрибут 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>
...