Добавить размытие на не входных полях div не работает - PullRequest
Новая
       7

Добавить размытие на не входных полях div не работает

1 голос
/ 22 января 2020

Я пытаюсь сопоставить стиль, который bootstrap применяется к input полям родительского div. Я удалил указанные стили :active и :focus из дочерних элементов input и пытаюсь использовать тег contentEditable в родительском элементе div, но получаю следующую ошибку. Любая помощь будет принята с благодарностью.

Ошибка: 

Uncaught TypeError: Cannot read property 'replace' of undefined
at a.validator.escapeCssMeta (jquery.validate.min.js:4)
at a.validator.errorsFor (jquery.validate.min.js:4)
at a.validator.prepareElement (jquery.validate.min.js:4)
at a.validator.element (jquery.validate.min.js:4)
at a.validator.onfocusout (jquery.validate.min.js:4)
at HTMLDivElement.b (jquery.validate.min.js:4)
at HTMLFormElement.dispatch (jquery.min.js:2)
at HTMLFormElement.y.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at Object.simulate (jquery.min.js:2)


$('.add-btn-outline').on('click', function() {
  console.log('focus');
  $(this).addClass('active');
})

$('.add-btn-outline').on('blur', function() {
  console.log('blur');
  $(this).removeClass('active');
})
.remove-btn-outline:focus,
.remove-btn-outline:active {
  outline: none !important;
  box-shadow: none !important;
}

.add-btn-outline.active {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
  border-color: #80bdff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label asp-for="BankSortCode" class="control-label"></label>
  <div class="form-control add-btn-outline" contentEditable onclick="$(this).children(':first').select();">
    <input class="autoTabInput max_chars-2 border-0 remove-btn-outline" type="number" step="1" min="0" max="99"> -
    <input class="autoTabInput max_chars-2 border-0 remove-btn-outline" type="number" step="1" min="0" max="99"> -
    <input class="autoTabInput max_chars-2 border-0 remove-btn-outline" type="number" step="1" min="0" max="99">
  </div>
  <span asp-validation-for="BankSortCode" class="text-danger"></span>
</div>

1 Ответ

1 голос
/ 22 января 2020

Это происходит, когда вы не указали имя для своей формы. Попробуйте сделать это, чтобы устранить проблему.

РЕДАКТИРОВАТЬ: После тщательного изучения вы попытаетесь прослушать событие размытия для элементов, имеющих класс add-btn-outline. Но этот элемент - div, и я не уверен, что он вызовет такого рода событие. Мне удалось добиться эффекта размытия, изменив вторую функцию события, вместо этого прослушивая функцию размытия с входов и меняя стиль родителя: 

$('.add-btn-outline').on('click', function() {
  console.log('focus');
  $(this).addClass('active');
})

//changed this one
$('.remove-btn-outline').blur(function() {
  console.log('blur');
  $(this).parent().removeClass('active');
})

JsFiddle здесь: https://jsfiddle.net/j8kwfeoz/1/

...