使textarea寬度適合於最長的文本行

Question

用戶輸入時，如何使文本區域增加WIDTH。 基本上，我需要將textarea的WIDTH設置為最長行的長度。

這就是我想出的。 但是，當用戶按下ENTER鍵時，寬度仍然增加。 如何使文本區域僅適合其文本大小？

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

Answer 1

正如@progrAmmar所提到的， $('#tfd').val().length tfd $('#tfd').val().length衡量文本的總長度，而不是最長行的寬度。

實際上，您的newWidth只是一個近似值，如果用戶鍵入非ASCII字符，則將根​​本不正確。

近似長度的一種方法是將pre元素放置在某處，設置visibility:hidden ， font-size和font-family與您的文本區域相同，並在用戶鍵入時使用新內容更新該元素。

通過測量該pre元素的寬度，您可以很好地近似文本。