Auto Focus behavior when using multible input elements within same <label> on FireFox only

Question

Situation:

I have 5 inputs inside one table cell. 3 text type inputs for phone# parts connected into one hidden "tel" input type. There is also "select" input for phone type. fillNext(id,part,limit) is a js function that takes care of moving focus to the appropriate part once the current one get filled. Function triggered with onkeyup event. (one time with "onChange" for auto complete cases) See table cell inputs:

<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>

Problem:

The code works perfectly and as expected on all browsers except FireFox! On FF, it works fine only when you press "tab" to move to fields. However, if you "click" on any of the visible inputs, including the "select" one, focus jumps automatically to the first element (id = "StudentPhone1")!!

Things I've Tried:

• Using "onChange" or "onClick" or "onKeydown" instead of "onKeyup" didn't help.
• Using number input type instead of text for phone parts didn't help
• Keep playing with when to .focus() an element has no effect.

Any ideas?

Answer 1

I solved the problem. It turns out that the problem is coming from having the inputs inside the "label" tag. (I did that to benefit from some css rules for labels instead of creating a new one!)

It has nothing to do with javaScript or events.

removing "label" tag solved it. Again, only Firefox has this strange behavior.

Answer 2

You have another solution too, (maybe not the best, sorry):

add to the <input>'s that have the keyup event a second event:

onclick=return(false);

It cancel the firefox action after clicking on it ^^