Question

I would like to prevent additional input on a HTML table cell once it’s width is reached.

The table has a fixed layout, no wrap and a specific width. The overflow is currently set to hidden.

Is it possible to filter (and ultimately prevent) input so that it stops at the fixed width so that there will be no overflow (hidden or otherwise). I am currently filtering carriage return using jQuery so that the cell will not expand to additional lines.

Perhaps I am asking too much from a HTML table…

Answer 1

One possible solution is to copy the cell content on keydown in an hidden field and to compute the value of this field:

$("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;
    }
});

I have created a fiddle with such solution : http://jsfiddle.net/scaillerie/hnRjB/2/.

A point to be noted is that the font-family and font-size should be the same in the input and in the div in order to have the correct value, that is the reason of the CSS rule :

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

But instead of *, you should restrict to suits your needs (for example, table input, #copy).

---

EDIT :

Just note that with this code, the user can enter just more than the input length, but you can add some “long” character to your copied field, in order to test the width : http://jsfiddle.net/scaillerie/hnRjB/3/.