Question

我有一张使用下面的CSS布局的表格。大多数情况下它运行良好，但只要有两个带<label>标签的输入字段，我就无法点击选择第二个字段。如果单击第一个输入字段就可以了。如果单击第二个输入字段，它会自动将焦点跳回到第一个输入字段。但是，您可以成功地在两者之间切换。

div.largeblock{
    margin:5px 0px 20px 0px;
    background:#d7e5f2;
    border:1px solid #d7e5f2;
}
div.largeblock label{
    display:block;
    margin-bottom:5px;
}
div.largeblock label span{
    display:block;
    float:left;
    margin-right:6px;
    width:130px;
    text-align:right;
}

<label>
   <span>Postcode</span>
   <input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
   <input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</label>

我有<select>＆amp; {1}在1个标签内。但对于只有1 <input>的其他20个左右的行，它没问题。

Answer 1

当您点击label时，大多数浏览器的行为都是为相关输入提供焦点（或检查复选框）。

您需要将第二个input标记移出label标记。可能是它自己的。

Answer 2

label元素应引用单个input元素，使用的for属性应与value id相同input它引用的{1}}元素。否则它将无法预测，例如label聚焦第一个input的示例，这在您的示例中没有任何意义。如果要对表单元素进行分组，则应使用元素fieldset（可以使用css样式设置为label）。

正确的语法是：

<label for="postcode1">Postcode 1</label>
<input type="text" id="postcode1" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<label for ="postcode2">Postcode 2</label>
<input type="text" id="postcode2" maxlength="3" name="postcode2" required="required" placeholder="Code"/>

或者如果您想使用fieldset：

<fieldset>
    <legend>Postcode</legend>
    <input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
    <input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</fieldset>

CSS / HTML - Focus无缘无故地自动离开输入字段

2 个答案: