在同一<label>中仅在FireFox上使用多个输入元素时的自动聚焦行为

Question

情况：

我在一个表格单元格中有5个输入。3 phone#部件的文本类型输入，连接到一个隐藏的"tel“输入类型。手机类型也有“选择”输入。fillNext(id，part，limit)是一个js函数，它负责在填充当前部分时将焦点移动到适当的部分。由onkeyup事件触发的函数。(一次使用"onChange“表示自动完成的情况)参见表格单元格输入：

<td>
    <span><!-- to invalidate td>label css rule -->
        <label> <!-- for font size and vertical-alignment -->
            <input name="data[Student][phone_1]" maxlength="3" onkeyup="fillNext(&quot;StudentPhone&quot;,1,3)" type="text" id="StudentPhone1">&nbsp;)&nbsp;
            <input name="data[Student][phone_2]" maxlength="3" onkeyup="fillNext(&quot;StudentPhone&quot;,2,3)" type="text" id="StudentPhone2">&nbsp;-&nbsp;
            <input name="data[Student][phone_3]" maxlength="4" onkeyup="fillNext(&quot;StudentPhone&quot;,3,4)" onchange="fillNext(&quot;StudentPhone&quot;,3,4)" type="text" id="StudentPhone3">&nbsp;&nbsp;&nbsp;&nbsp;
            <select name="data[Student][phone_type]"  id="StudentPhoneType">
                <option value="Cell Phone" selected="selected">Cell Phone</option>
                <option value="Work">Work</option>
                <option value="Home">Home</option>
            </select>
            <input name="data[Student][phone]" style="display:none;" type="tel" id="StudentPhone"> 
        </label>
    </span>
</td>

问题：

代码在除FireFox之外的所有浏览器上运行得都很完美，而且与预期的一样！在FF上，只有当你按下“选项卡”移动到字段时，它才能正常工作。但是，如果您“单击”任何可见输入，包括"select“1，焦点会自动跳转到第一个元素(id = "StudentPhone1")！

我尝试过的事情：

• 使用"onChange“、"onClick”或"onKeydown“代替"onKeyup”没有帮助。
• 使用号码输入类型代替文本对电话部件没有帮助
• 继续播放“何时到.focus()”元素没有任何效果。

有什么想法吗？

Answer 1

我解决了问题。事实证明，问题来自于在"label“标签中有输入。(我这么做是为了从一些css标签规则中受益，而不是创建一个新的！)

与javaScript或events无关。

移除“标签”标签解决了问题。同样，只有Firefox有这种奇怪的行为。

Answer 2

你也有另一个解决方案(也许不是最好的，对不起)：

将第二个事件添加到具有<input>事件的keyup中：

onclick=return(false);

在单击firefox ^^之后，它将取消firefox操作。