多次输入失去了对点击的关注

Question

我有一个包含地址字段的表单 http://jsfiddle.net/DP3aw/2/

出于某种原因，我必须像现在一样将地址放在多个文本输入中。

当您点击第二个或第三个输入时，焦点将跳转到第一个文本字段，为什么会发生这种情况？无论如何我可以阻止吗？或者我是否必须使用js / jQuery来阻止它发生？

谢谢！

Answer 1

这是因为您拥有INPUT标记内的所有LABEL元素。单击标签会聚焦关联的输入。由于所有输入都在标签内，它们都会触发它，导致焦点跳转到第一个输入（相关的输入）。

修正版：http://jsfiddle.net/DP3aw/3/

断

<label for="OrgAddr"><span>Address<strong>*</strong></span>
<div><input id="OrgAddr" name="OrgAddr" type="text" class="required" value=""></div>
<div><input id="OrgAddr2" name="OrgAddr2" type="text" value=""></div>
<div><input id="OrgAddr3" name="OrgAddr3" type="text" value=""></div></label>

固定

<label for="OrgAddr"><span>Address<strong>*</strong></span></label>
<div><input id="OrgAddr" name="OrgAddr" type="text" class="required" value=""></div>
<div><input id="OrgAddr2" name="OrgAddr2" type="text" value=""></div>
<div><input id="OrgAddr3" name="OrgAddr3" type="text" value=""></div>

可能的改进

这是一个语义更正确的版本，它使用FIELDSET进行常规分组，并为每个单独的输入添加标签。它还演示了如何单击标签将聚焦其关联的输入元素。

http://jsfiddle.net/njY3U/1/

<fieldset>
<legend>Address</legend>
    <label for="street1">Street 1</label>
    <div><input type="text" id="street1" /></div>

    <label for="street2">Street 2</label>
    <div><input type="text" id="street2" /></div>

    <label for="city">City</label>
    <div><input type="text" id="city" /></div>

    <!-- ETC -->
</fieldset>