Question

我希望在达到宽度后阻止HTML表格单元格上的其他输入。

该表具有固定的布局，没有包装和特定的宽度。溢出当前设置为隐藏。

是否可以过滤（并最终阻止）输入，使其以固定宽度停止，这样就不会有溢出（隐藏或其他）。我目前正在使用jQuery过滤回车，以便单元格不会扩展到其他行。

也许我从HTML表格中要求太多......

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

需要注意的一点是，input和div中的font-family和font-size应该相同，以便拥有正确的值，这就是CSS规则：

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

但是，您应该限制以满足您的需求（例如*），而不是table input, #copy。

编辑：

请注意，使用此代码，用户只能输入超过输入长度，但您可以在复制的字段中添加一些“长”字符，以便测试宽度：http://jsfiddle.net/scaillerie/hnRjB/3/。

达到固定宽度后，防止表格单元格上的输入？

1 个答案: