在 Firefox 中，如何强制光标停留在最后输入的字符上？答案

【问题标题】：In Firefox, how do I force a cursor to stick to the last typed character?在 Firefox 中，如何强制光标停留在最后输入的字符上？
【发布时间】：2010-10-14 12:35:33
【问题描述】：

我有一个输入字段，将在其中输入序列号。允许的字符数已设置。

问题是由于字母间距，在 Firefox 中输入字符时，光标会跳到您将输入下一个字符的位置（即使设置了 maxlength），字符会从小字符中分离出来他们应该坐在盒子里。

IE 会“正确”显示它。

如何强制 firefox 不将光标放在字母间距之后？（如果可能/需要 JS，jQuery 会很好）

这是我的代码：

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

【问题讨论】：

标签： jquery css forms input text-cursor

【解决方案1】：

看来，FireFox 处理 letter-spacing 的方式与 Internet Explorer 和其他浏览器不同。

如果将输入元素的width 更改为220 像素，则不会导致任何文本溢出。而且由于您有效地隐藏了输入，因此额外的宽度无关紧要。

我已经在 Chrome build 1.0.154.53、FireFox 3.0.7 和 Internext Explorer 8.0.6001 中测试了这个解决方案。 18372.

【讨论】：

【解决方案2】：

我担心 firefox 实际上会像它应该处理的那样处理这个问题，因为现在字符右填充以匹配字母间距。 Safari 也这样做。 IE 做错了，它假装字符比实际小。

我建议只是让输入框的宽度变大...

【讨论】：

你想说的是 Internet Explorer 忽略了字母间距，对吧？

【解决方案3】：

你如何检查序列号的长度，如果它达到正确的长度，它将把焦点移到另一个元素，从而避免溢出？

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

【讨论】：

这会导致可用性不佳，imo。

【解决方案4】：

您可以将背景图像的 x 位置偏移一定量，以便背景与 Firefox/Safari 等中的字符对齐，然后使用条件 IE CSS 语句让 IE 恢复为你的 0 50% 定位。

编辑：误解了问题只出现在最后一个字符上。如果在布局的其余部分中像素精度不是必需的，则在 IE 和 Firefox 中将 #serial 的宽度设置为大约 width:230px 对我有用。

【讨论】：