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

Fit textarea width to the longest line of text

本文关键字：文本 调整 区域      更新时间：2024-04-04

如何在用户打字时使文本区域增加其宽度。基本上，我需要文本区域的宽度仅为最长一行的长度。

这就是我想到的。但当用户点击ENTER时，宽度仍然会增加。如何使文本区域仅适合其文本的大小？

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

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

事实上，您的newWidth只是一个近似值，如果用户键入非ASCII字符，它将根本不正确。

一种近似长度的方法是将pre元素放置在某个位置，将visibility:hidden、font-size和font-family设置为与文本区域相同，并在用户键入时使用新内容更新此元素。

通过测量这个pre元素的宽度，可以得到文本的一个很好的近似值。

相关文章：