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

Answer 1

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 2

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 3

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.

Answer 4

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.