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

Question

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, like so: firefox cursor jump
firefox cursor jump http://www.bryonykernick.com/dropboxofdeath/ff-form-cursor.png

IE displays it 'correctly': ie no cursor jump
ie no cursor jump http://www.bryonykernick.com/dropboxofdeath/ie-form-cursor.png

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>

Answer 1

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.

Answer 2

I fear firefox is actually handling this like it should handle, because the characters are now right-padded to match the letter-spacing. Safari does this as well. IE does it the wrong way, it pretends the character is smaller than it actually is.

I would suggest to just make the width larger of the input box...

Answer 3

How about you check the length of the serial number and if its reached the correct length it will move the focus to another element thus avvoiding the overspill?

<script type="text/javascript">
function CheckLength(myBox){
var myValue= myBox.Value;
var myLength myValue.Length;
if(myLength == 9){
document.getElementById("Submit").Focus();
}
</script>
<form id="serialForm">
<label for="serial">Serial:</label>
<input id="serial" type="text" name="serial" maxlength="9" onkeyup="CheckLength(this);" />
<input type="submit" id="Submit" value="Submit"/>
</form>

Answer 4

You may be able to offset the x-position of the background image by a certain amount so that the background lines up with the characters in Firefox/Safari et al, and then use a conditional IE CSS statement to have IE revert to your 0 50% positioning.

edit: misunderstood that the problem only appears at the final character.If pixel precision is not essential in the rest of the layout, setting the width of #serial to around width:230px works for me in IE and Firefox.