Question

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

我发现了这个问题Textarea to resize based on content length，但它只扩展了textarea的高度。

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

此外，我正在寻找解决方案，它允许我更改fontsize和textarea调整大小以适应它。

有没有人有想法？

Answer 1

高度的解决方案很好。

使其看起来水平正确，添加以下css，

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

Answer 2

甚至
使用onkeypress

请参阅此示例： http://jsfiddle.net/kevalbhatt18/bkyxz8cc/3/

的

的
<textarea id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></textarea>

的

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

的

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

的

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

在css中提供min-width

的

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

的

如果从textarea框中删除所有文本，则需要使用焦点
的占位符值

的

的
$("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调整大小

使用按钮点击

的

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

的

Answer 3

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

所以我用这个Textarea to resize based on content length作为扩展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());
}

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

3 个答案: