Fixed size text box to limit user input

JavaScript
1

What I’d like to do is have a fixed-size textarea that only allows as much input as will fit in the box (based on a fixed font size) without any scrolling or resizing. (number of characters will vary as using proportional font).

I’ve tried all sorts of things including intercepting when a scroll bar appears, and trying to modify this jquery autosize plugin https://github.com/padolsey/jQuery.fn.autoResize#readme, but I can’t get it to work properly.

Can anyone suggest the best way to go about it, or is there already a plugin to do it?

Thanks

2

How are you fixing the font-size? I assume you are aware that users can over-ride in their browsers any css styles that you apply.

3

A way to get started on this is to remove the scrollbar from the input element, and to then check if the keypress changes the size of the field.


.fixed {
    overflow: hidden;
}


<textarea class="fixed"></textarea>


$('textarea.fixed').keyup(function () {
    while (this.clientHeight < this.scrollHeight) {
        this.value = this.value.slice(0, -1);
    }
});
4

Thanks Paul

Works perfectly - in all browsers so far…