I would like to create HTML input fields (either single-line or textarea) that stop accepting new text when they are "full" - i.e. when there is no more room in the widget for new characters to be displayed. 

This is different from a putting a maxlength limit on the number of characters, as (for example) 65 lowercase letter "i"s take up much less space than 65 uppercase "W"s in proportional fonts.

Is there a way to do this? (If there is, the solution would ideally also cover when text is pasted in, and truncate all the text over the limit).

Edit: The solution has to work with proportional fonts - maxlength does not help here, we are not interested in stopping at a character length.