Deny entry to table cell after reaching fixed width?

Question

I would like to prevent additional input to the HTML table cell after reaching the width.

The table has a fixed layout, without a wrapper and a certain width. The overflow is currently set to hidden.

Is it possible to filter (and ultimately prevent) the input so that it stops at a fixed width so that there is no overflow (hidden or otherwise). I am currently filtering carriage returns with jQuery so that the cell does not expand to extra rows.

Maybe I ask too much from the HTML table ...

Answer 1

One possible solution is to copy the contents of the cell to keydown in a hidden field and calculate 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 created a fiddle with this solution: http://jsfiddle.net/scaillerie/hnRjB/2/ .

It should be noted that the font family and font size must be the same in the input and in the div in order to have the correct value, which is the reason for the CSS rule:

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

But instead of * you should limit your needs (e.g. table input, #copy ).

---

EDIT:

Just remember that with this code the user can enter only more input length, but you can add “long” to your copied character to check the width: http://jsfiddle.net/scaillerie/hnRjB/3/ .