使textarea宽度适合于最长的文本行

Question

How do I make a textarea increase its WIDTH while the user is typing. Basically I need the WIDTH of the textarea to be only to the length of the longest line.

This is what I came up with. But when the user hits ENTER still the width increases. How do I make the textarea to fit only to the size of its text?

$(document).on("click blur keyup", ".fT", function() {
      var newWidth = ($('#tfd').val().length)*10;
      $('#tfd').width(newWidth);
});

Answer 1

As @progrAmmar mentioned, $('#tfd').val().length measures the total length for your text, not the width of the longest line.

In fact your newWidth is just an approximation and will not be correct at all if a user types non ASCII characters.

One way to approxmiate the length is to place a pre element somewhere, set visibility:hidden and font-size and font-family the same as your textarea, and update this element with the new content whenever the user types.

By measuring this pre element's width you can get a good approximation for the text.