CODEWITHSUNDEEP
htmltextarea
Mdhar9e
Mdhar9e

Reputation: 1376

how to restrict my textarea to overflow beyond certain rows?

i am working with textarea in that i don't want scroll bar while increasing the number of rows. It should be resizable. Is there any possible way to do this.

Upvotes: 1

Views: 246

Answers (1)

alex
alex

Reputation: 490283

You can use JavaScript to increase the height of the textarea as the user enters more text.

var textarea = document.getElementsByTagName('textarea')[0],
    originalHeight = textarea.clientHeight;

textarea.addEventListener('keyup', function() {
    textarea.style.height = Math.max(textarea.scrollHeight, originalHeight) + 'px';
});

jsFiddle.

It doesn't seem to want to shrink with that example code. I think most people who write these controls produce a hidden div with height: auto and all the font styles copied over (font-size, font-family, line-height, letter-spacing, etc) and then update the div's inner text with the textarea's contents. It then sets the textarea's height based on the height of this hidden element.

Upvotes: 1

Related Questions