html - 多个输入在点击时失去焦点

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>