Question

我已经使用“ for”属性将label元素与表单字段相关联。当我在表单字段下方显示验证消息时，就会发生此问题。

例如，在下面的演示中，表单字段1具有要求的验证onblur，

通过单击标签选择表单字段1
单击在表单域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>

Answer 1

这可以为我解决此问题：

$('#formfield1').blur(function() {
    window.setTimeout(function () { $('#errorMessage').text('Form field is required').show(); }, 100);
});

不知道为什么，但是可以。仅供参考-我尝试了50天的超时，但这没有用。

Answer 2

我认为这是因为错误消息立即出现并按了下一个字段，因此在单击发生的地方不再出现该消息。延迟文本可以防止这种情况：

$(function () {
	$('#formfield1').blur(function() {
   	$('#errorMessage').text('Form field is required').delay(1000).show(0);
  });
  
  $('*').on('focus blur', function (e) {
  	console.log(e.type + ' ' + this.id);
  })
});

.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" class="hidden">

  </div>
  <div>
    <label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
  </div>

</div>

或更改文本的位置：

$(function() {
  $('#formfield1').blur(function() {
    $('#errorMessage').text('Form field is required').css('display','inline-block');
  });

  $('*').on('focus blur', function(e) {
    console.log(e.type + ' ' + this.id);
  })
});

.hidden {
  display: none;
}

div {
  margin: 10px;
}

label {
  width: 100px;
  display: inline-block;
}

.as-console-wrapper {
  max-height: 65px !important;
}

#errorMessage {
  position:absolute;
  margin:0 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
  <div class="box">
    <label for="formfield1">Form Field 1</label> <input type="text" id="formfield1" />
    <div id="errorMessage" class="hidden">
    </div>

  </div>
  <div>
    <label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
  </div>

</div>

Answer 3

这与在调用.show()函数时要修改的DOM中输入元素的位置有关。 errorMessage向下推输入并更改其焦点似乎依赖的范围。如果将errorMessage放在底部，以使.show()不影响formField2输入的位置，它将聚焦良好。

https://jsfiddle.net/ykhupeo8/1/

单击忽略：标签元素与表单控件关联的问题

3 个答案: