单击忽略:标签元素与表单控件关联的问题 [英] Click ignored: Issue with label elements to associate with form controls

问题描述

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

I have associated the label element to form fields using "for" attribute. The issue happens when I show a validation message below the form fields.

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

For example, in the below demo, form field 1 has a required validation onblur,

1. 通过单击标签选择表单字段1
2. 现在单击，它应该将焦点设置为表单字段2，但未设置焦点，并且 点击被忽略 .

1. Select form field 1 by clicking on the label
2. Now click on form field 2 label which should set the focus to form field 2, but the focus is not set and click is ignored.

有什么想法吗?

$(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>

推荐答案

我认为这是因为错误消息会立即显示并推送到下一个字段，因此单击发生的地方将不再显示该错误消息.给文本一些延迟可以防止这种情况:

I think it's because the error message that appear immediately and push the next field so this one is no more at the place where the click occured. Giving some delay to the text will prevent this:

$(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>

这篇关于单击忽略:标签元素与表单控件关联的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！