在不起作用的非输入 div 字段上添加模糊

Question

我正在尝试将引导程序应用于input字段的样式与父div相匹配。我已经从子元素中删除了上述:active和:focus样式input并尝试在父div元素中使用contentEditable标签，但我收到以下错误。 任何帮助将不胜感激。

错误：

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>

Answer 1

当您不为表单添加名称时，往往会发生这种情况。尝试这样做来解决问题。

编辑：仔细观察后，您尝试在带有类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 here ： https://jsfiddle.net/j8kwfeoz/1/