6

幅に達したら、HTML テーブル セルへの追加入力を防止したいと考えています。

テーブルのレイアウトは固定で、折り返しはなく、特定の幅があります。オーバーフローは現在非表示に設定されています。

オーバーフロー（非表示またはその他）が発生しないように、固定幅で停止するように入力をフィルタリング（および最終的に防止）することは可能ですか？現在、セルが追加の行に展開されないように、jQuery を使用してキャリッジ リターンをフィルタリングしています。

おそらく、私は HTML テーブルに多くを求めすぎているのでしょう...

4

1 に答える 1

3

考えられる解決策の 1 つは、セルの内容をkeydown隠しフィールドにコピーし、このフィールドの値を計算することです。

$("table input").on("keydown", function(e) {
    $("#copy").text(this.value);

    var width = $("#copy").outerWidth();
    console.log("w: " + width);

    var code = e.keyCode ? e.keyCode : e.which;
    if (width > 50 && code  !== 8 && code !== 49) {
        return false;
    }
});

私はそのようなソリューションでフィドルを作成しました: http://jsfiddle.net/scaillerie/hnRjB/2/。

注目すべき点は、font-family と font-size が と で同じである必要があることinputですdiv。これは、正しい値を持つために、CSS ルールの理由です:

* {
    font-family: arial;
    font-size: 1em;  
}

ただし、 の代わりに*、必要に応じて制限する必要があります (たとえば、table input, #copy)。

編集 ：

このコードでは、ユーザーは入力の長さを超えて入力できますが、幅をテストするために、コピーしたフィールドに「長い」文字を追加できることに注意してください: http://jsfiddle.net/scaillerie/hnRjB /3/ .

于 2012-12-19T20:28:14.927 に答える