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

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

需要注意的一点是， 和 中的 font-family 和 font-size 应该相同input才能div具有正确的值，这就是 CSS 规则的原因：

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

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

编辑 ：

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