Disable TextArea Horizontal Scrolling Jquery

Question

I'm working within a child row. I've created a text box via a textarea command within jQuery (seen below):

<td style="width: 370px;">
    <textarea rows = "5" style="width: 300px;"></textarea>

Here's the issue: I can't figure out how to disable horizontal scrolling and make it drop down to the next line when I reach the end of the text box. So how do I disable horizontal scrolling? I want vertical scrolling to be enabled so that the textarea doesn't get bigger, because it can't change size.

Thanks for your help.

This does not appear to be a duplicate of http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery , in fact, the question seems to be asking the exact opposite. — saluce, Mar 27 '15 at 14:56
@saluce Thank you! I totally agree! Is there any way to remove the duplicate flag? I feel like people will ignore the question because of the flag... — Josiah Nusbaum, Mar 27 '15 at 14:59
It's already in the reopen queue...as people review the queue, they'll make a determination whether they agree or not. Enough votes to reopen will remove the duplicate flag. Too many "Leave Closed" votes will leave it closed and remove it from the queue. — saluce, Mar 27 '15 at 15:01
The code you've provided does just what you're asking for in Chrome and FF. — j08691, Mar 27 '15 at 16:09
@j08691 I forgot to mention that the client only uses Internet Explorer... (Yeah, I know, it makes complete sense to only use the worst browser in existence)... — Josiah Nusbaum, Mar 27 '15 at 17:35

score 2 · Accepted Answer · answered Dec 08 '15 at 16:09

You can use this simple code

$("textarea").on("keydown keyup", function(){
    if(this.scrollHeight > $(this).outerHeight())
        $(this).height(this.scrollHeight);
});

textarea {
  resize: vertical; 
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<textarea></textarea>

Disable TextArea Horizontal Scrolling Jquery

1 Answers1