javascript - 如何扩展文本区域以垂直和水平适应文本？

Question

我如何使用 html、css 和 jquery 做这样的事情？

我发现了这个问题 Textarea to resize based on content length但它只会扩展文本区域的高度。

我希望我的文本区域能够精确地模仿用户输入的内容。因此，如果用户将文本写入一行，则直到用户点击“输入”，行才会结束。 textarea 的宽度可以大于窗口。高度也一样。

我也在寻找允许我更改字体大小和调整文本区域大小以适应它的解决方案。

有没有人有想法？

Answer 1

感谢大家的建议和回复，但最后我提出了自己的解决方案。

所以我用了这个Textarea to resize based on content length作为扩展文本区域高度的脚本。

为了扩展 textarea 的宽度，我创建了一个隐藏的 div，我从 textarea 中复制文本并递归地将 div 的宽度分配给 textarea。当然，您必须为两个元素设置相同的文本样式。

此外，由于我希望文本区域能够“无限扩大”，这就是为什么我也更改 html 和 body 的宽度。

function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (90+o.scrollHeight)+"px";
    x = $('textarea').val().replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/ /g, '&nbsp;')
     .replace(/\n/g, '<br>');
    $('div').html(x);
    $('html').css('width',$('div').width()+50);
    $('body').css('width',$('html').width());
    $('textarea').css('width',$('html').width());
}