In Firefox, how do I force a cursor to stick to the last typed character?

Issue

I have an input field in which a serial number will be typed. The number of characters allowed is set.

Problem is that because of the letter-spacing, on typing a char in firefox, the cursor will jump ahead to where you would type the next char (even with maxlength set), which has the chars break break out of the little boxes they are supposed to sit in.

IE displays it 'correctly'.

How can I force firefox to not place the cursor after the letter-spacing? (jQuery would be nice, if JS is possible/needed)

Here's my code:

#serial {
    background:transparent url(../images/bg_serial.gif) no-repeat scroll 0 50%;
    border:0 none;
    color:#FFFFFF;
    font:bold 16px Courier New;
    height:22px;
    letter-spacing:14px;
    line-height:normal;
    padding:4px 0 0 6px;
    text-transform:uppercase;
    width:208px;
}

<form id="serialForm">
<label for="serial">Serial:</label>
<input id="serial" type="text" name="serial" maxlength="9" />
</form>

Solution

FireFox handles letter-spacing differently than Internet Explorer and the rest of the browsers, it seems.

If you change the width of the input element to 220 pixels, you won't cause any text-overflow. And since you are effectively hiding the input, the extra width won't matter.


I've tested this solution in Chrome build 1.0.154.53, FireFox 3.0.7 and Internext Explorer 8.0.6001. 18372.

Answered By - cllpse