如何扩展textarea以垂直和水平放置文本？ [英] How to expand textarea to fit text vertically and horizontally?

问题描述

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

我发现了这个问题 Textarea根据内容长度调整大小但它只扩展textarea的高度。

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

我也在搜索解决方案，它允许我更改fontsize和textarea调整大小以适应它。

有没有人有想法？

解决方案

感谢大家的建议和回应，但最后我带来了我自己的，有点解决方法，解决方案。

所以我用这个 Textarea根据内容长度调整大小作为扩展textarea高度的脚本。

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

另外，因为我希望textarea能够将自己膨胀到无限超越，这就是为什么我也改变了html和body的宽度。

  function textAreaAdjust（o）{
 o.style.height = 1px的; 
 o.style.height =（90 + o.scrollHeight）+px; 
x = $（'textarea'）。val（）。replace（/& / g，'& amp;'）
 .replace（/> / g，'& gt;' ）
 .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（））; 
} 
  

How can I do something like this using html, css and jquery?

I found this question Textarea to resize based on content length but it only expands height of textarea.

I want that my textarea precisely imitate what user is inputing. So if user is writing text into a row, row doesnt end until the user hit "enter". The width of textarea could be larger than the window. Same thing for the height.

Also Im searching for solution which allows me to change the fontsize and the textarea resize to fit it.

Does anyone have an idea?

解决方案

Thanks everyone for their advices and responses, but finally I came with my own, a little bit workaround, solution.

So I used this Textarea to resize based on content length as script expanding the height of textarea.

To expand the width of textarea I created a hidden div, whom I copied the text from textarea and recursively I assigned the width of div to textarea. Of course you have to set same styling of text for both elements.

Also as I wanted the textarea to be able to inflate itself "to infinite and beyond", thats why Im changing the width of html and body also.

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());
}

这篇关于如何扩展textarea以垂直和水平放置文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！