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>标签。以下是如何执行此操作的示例：

＆＃13;

<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="" />

＆＃13;

以下是您修复http://codepen.io/anon/pen/NqrqYd

的示例

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

1 个答案: