如何扩展textarea以垂直和水平放置文本？

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

我发现这个问题Textarea根据内容长度resize，但它只扩展textarea的高度。

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

我也在搜索解决方案，它允许我更改fontsize和textarearesize以适应它。

有没有人有想法？

Answer 1

高度的解决方案很好。

为了让它看起来水平正确，添加以下css，

textarea { width: 100%; display: block; resize: vertical; } 

Answer 2

甚至使用onkeypress

看到这个例子： http ： //jsfiddle.net/kevalbhatt18/bkyxz8cc/3/

对于占位符加载使用jquery并将占位符大小应用于输入

 $('textarea').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px'); 

即使你可以使用id而不是输入这只是一个例子，所以我用$（输入）

并在css中提供最小宽度

 .form { border: 1px solid black; text-align: center; outline: none; min-width:4px; } 

---

如果从textarea框中删除所有文本，则将使用focusout取占位符值

  $("textarea").focusout(function(){ if(this.value.length>0){ this.style.width = ((this.value.length + 1) * 8) + 'px'; }else{ this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px'; } }); 

对于更改，fontsize和textarea会resize

使用按钮单击

 $('button').on('click',function(){ var style={ "font-size":"20px", "height":"90px", "width":"40%", } $('textarea').css(style); }) 

Answer 3

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

所以我使用这个Textarea根据内容长度resize，因为脚本扩展了textarea的高度。

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

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

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