将textarea宽度调整为最长的文本行

Question

如何在用户输入时使textarea增加其宽度。基本上我需要textarea的WIDTH只是最长行的长度。

这就是我想出的。但是当用户按下ENTER时，宽度会增加。如何使textarea仅适合其文本的大小？

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

Answer 1

正如@progrAmmar所提到的，$('#tfd').val().length测量文本的总长度，而不是最长行的宽度。

实际上，newWidth只是一个近似值，如果用户输入非ASCII字符，则根本不正确。

一种近似长度的方法是在某处放置pre元素，将visibility:hidden和font-size以及font-family设置为与textarea相同，并使用以下内容更新此元素用户输入时的新内容。

通过测量此pre元素的宽度，您可以获得文本的良好近似值。