Question

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

问题是因为字母间距，在firefox中输入一个字符时，光标会跳到你输入下一个字符的位置（即使设置了maxlength），这会让字符突破掉一点点他们应该坐在那里的盒子，如：firefox cursor jump
firefox cursor jump http://www.bryonykernick.com/dropboxofdeath/ff-form-cursor.png

IE'正确'显示它：ie no cursor jump
ie no cursor jump http://www.bryonykernick.com/dropboxofdeath/ie-form-cursor.png

如何强制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>

Answer 1

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

如果将input元素的width更改为220像素，则不会导致文本溢出。由于您实际上隐藏了输入，因此额外宽度无关紧要。

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

Answer 2

我担心firefox实际上是在处理它，因为字符现在是右边填充的，以匹配字母间距。 Safari也是这样做的。 IE以错误的方式做错，它假装字符比实际小。

我建议只要使输入框的宽度更大......

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

Answer 4

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

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

在Firefox中，如何强制光标粘贴到最后输入的字符？

4 个答案: