3

I have a form containing address fields as such http://jsfiddle.net/DP3aw/2/

For some reason I have to put the address in multiple text inputs as it is now.

When you click on the 2nd or 3rd input, the focus will jump to the first text field, why is that happening? is there anyway I can prevent that? or do I have to use js/jQuery to stop it from happening?

Thanks!

4

1 回答 1

4

这是因为您在标签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>

可能的改进

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

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>
于 2012-04-13T21:39:52.477 回答