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

Question

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

以前有没有人运行遇到过这个问题？

  <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

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

Firefox form field stealing focus when another field is clicked

html

javascript

forms

firefox

jquery