javascript - 达到固定宽度后防止在表格单元格上输入？

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;
    }
});

我用这样的解决方案创建了一个 fiddle :http://jsfiddle.net/scaillerie/hnRjB/2/ .

需要注意的一点是，input 和 div 中的 font-family 和 font-size 应该相同，以获得正确的值，这就是 CSS 规则的原因:

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

但不是 *，您应该限制以满足您的需要(例如，表格输入，#copy)。

---

编辑:

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