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

Posted

技术标签:

【中文标题】达到固定宽度后防止在表格单元格上输入?【英文标题】:Prevent input on table cell after fixed width reached? 【发布时间】:2012-12-07 06:15:38 【问题描述】:

一旦达到宽度,我想阻止在 html 表格单元格上进行额外输入。

表格有固定的布局,没有换行和特定的宽度。溢出当前设置为隐藏。

是否可以过滤(并最终阻止)输入,使其在固定宽度处停止,从而不会出现溢出(隐藏或其他方式)。我目前正在使用 jQuery 过滤回车,以便单元格不会扩展到其他行。

也许我对 HTML 表格的要求太多了...

【问题讨论】:

你想如何测量宽度?单元格的 CSS 宽度或它包含的字符数? 你提出了一个有趣的问题,但我原本想用宽度来测量。使用下面塞缪尔的答案并检查输入字符串的长度应该很容易计算字符数。 【参考方案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/。

需要注意的是,inputdiv 中的 font-family 和 font-size 应该相同才能获得正确的值,这就是 CSS 规则的原因:

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

但您应该限制为适合您的需要(例如,table input, #copy),而不是 *


编辑:

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

【讨论】:

这似乎是我想要的答案。它可能有点复杂,因为表格单元格中也可能有图形。我只需要适应图形的宽度。

以上是关于达到固定宽度后防止在表格单元格上输入?的主要内容,如果未能解决你的问题,请参考以下文章

在表格视图中按下单元格上的按钮时如何创建新单元格

如何在表格分类器中设置固定表格宽度(不是单元格)?

chrome vs FF/IE/Opera 计算表格单元格宽度? (表格布局:固定)

将鼠标悬停在 DT::datatable 中的单元格上后,在工具提示中显示单元格值

html中,如何固定table单元格宽度?

如何固定表格视图中自定义单元格文本字段的标签值?