我已使用“for”属性将标签元素关联到表单字段。当我在表单字段下方显示验证消息时，会出现此问题。
例如，在下面的演示中，表单字段 1 有一个必需的验证 onblur，
- 单击标签选择表单字段 1
- Now click在表单字段 2 标签上，应将焦点设置为表单字段 2，但焦点未设置并且点击被忽略.
有什么想法吗？
$(function () {
$('#formfield1').blur(function() {
$('#errorMessage').text('Form field is required').show();
});
var counter = 1;
$('*').on('focus blur', function (e) {
console.log(counter++ + ' ' + e.type + ' ' + this.id);
})
$('*').click(function (e) {
e.stopImmediatePropagation()
console.log(counter++ + ' ' + e.target.id + ' clicked ');
});
});
.hidden { display: none; }
div { margin: 10px; }
label { width: 100px; display: inline-block; }
.as-console-wrapper { max-height: 65px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
<div>
<label for="formfield1">Form Field 1</label> <input type="text" id="formfield1" />
</div>
<div id="errorMessage" tabindex="1" class="hidden">
</div>
<div>
<label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
</div>
</div>
这为我解决了这个问题：
$('#formfield1').blur(function() {
window.setTimeout(function () { $('#errorMessage').text('Form field is required').show(); }, 100);
});
不知道为什么，但它有效。仅供参考 - 我尝试将超时设置为 50，但没有成功。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
