javascript - Textarea 在用户输入时扩展其宽度

Question

有没有办法让文本区域在用户输入时扩展其宽度？基本上我为文本区域使用边框，因此我需要文本区域的宽度仅为最长行的长度。所以它看起来漂亮整洁。

注意:我允许用户更改文本区域的字体大小。

这是我拥有的，但没有做要求的事情。

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

我不关心文本区域的高度。我只需要让 textarea 适合里面的文字即可。

Answer 1

如果我理解正确你想实现类似的东西:(jsfiddle 已删除，请参阅下面的 fiddle )

它使用隐藏的div根据文本内容计算textarea的宽度。 textarea 有 padding:0 所以宽度严格链接到你想要的内容。 div 样式“min-width”和“max-width”定义了 textarea 可以折叠/展开的最小和最大宽度。

编辑:您指出的问题是由于 div 中的换行而发生的。为了避免它你最终可以使用 CSS white-space: pre-line;产权。我更新了(附加的)示例 fiddle 。

$("#t1").on("keyup", function() {

  $("#d1").text($(this).val());
  $(this).css("width", $("#d1").css("width"));
  $(this).css("height", $("#d1").css("height"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t1" style='min-width:100px;min-height: 100px; padding:0; font-size:14px'>

</textarea>

<div id="d1" style='max-width:200px;min-height:20px;white-space: pre-line; float:right;font-size:15px; display:none'>

</div>