单击另一个字段时，Firefox 表单字段窃取焦点

Question

我在 Firefox 中使用多个文本输入字段的表单时遇到问题。当我单击第二个或第三个输入时，第一个文本输入会抢占焦点。除非我突出显示其他字段之一中的某些内容（在这种情况下它保持焦点），否则会发生这种情况。

以前有人遇到过这个问题吗？

http://codepen.io/anon/pen/jPrPYm

  <div>
    <form action="/forms/SaveResponse" id="qansform" method="post">
      <input id="NavigationType" name="NavigationType" type="hidden" value="Update" />


      <div>
        <div class="question input-select">
          <label>
            <span class="label">Name:</span>
            <input data-rule-maxlength="500" data-rule-required="true" id="FirstTextBox" name="FirstTextBox" type="text" value="" />
            <br />
            <br />
            <span class="label">Contact:</span>
            <input data-rule-maxlength="500" data-rule-required="true" id="SecondTextBox" name="SecondTextBox" type="text" value="" />
            <br />
            <br />
            <span class="label">Phone Number:</span>
            <input data-rule-maxlength="20" data-rule-required="true" id="ThirdTextBox" name="ThirdTextBox" type="text" value="" />
            <br />
            <br />
          </label>
        </div>

        <div class="question input-select">
          <label>
            <span class="label">Date:</span>
            <input class="datefield" data-rule-date="true" data-rule-required="true" id="FourthTextBox" name="FourthTextBox" type="text" value="" />
            <br />
            <br />
          </label>
        </div>
      </div>
      <input type="button" value="Go Back" class="cancel form-submit" onclick="cancelClick()" />

    </form>
  </div>

Answer 1

问题是您错误地使用了<label> 标签。这是一个如何做到这一点的例子：

<label for="FirstTextBox">
  <span class="label">Name:</span>
</label>
<input data-rule-maxlength="500" data-rule-required="true" id="FirstTextBox" name="FirstTextBox" type="text" value="" />

这是您的示例修复http://codepen.io/anon/pen/NqrqYd