4

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

问题是由于字母间距，在 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>
4

4 回答 4

2

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

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


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

于 2009-03-24T13:38:57.557 回答
0

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

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

于 2009-03-20T13:36:40.390 回答
0

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

<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>
于 2009-03-20T14:35:04.540 回答
0

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

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

于 2009-03-20T14:39:43.327 回答