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

0

文字の間隔に合わせて文字が右に埋め込まれているため、Firefoxが実際にこれを処理するように処理しているのではないかと心配しています。Safariもこれを行います。IEはそれを間違った方法で行い、文字が実際よりも小さいふりをします。

入力ボックスの幅を大きくすることをお勧めします...

于 2009-03-20T13:36:40.390 に答える
0

背景画像の x 位置を一定量オフセットして、背景が Firefox/Safari などの文字と一致するようにし、条件付き IE CSS ステートメントを使用して IE を 0 50 に戻すことができる場合があります。 % ポジショニング。

編集: 問題が最後の文字にのみ現れると誤解しました。レイアウトの残りの部分でピクセル精度が重要でない場合は、#serial の幅を width:230px 前後に設定すると、IE と Firefox で機能します。

于 2009-03-20T14:39:43.327 に答える
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 に答える