在引导程序中自动调整文本区域的大小答案

【问题标题】：Automatically resizing textarea in bootstrap在引导程序中自动调整文本区域的大小
【发布时间】：2016-06-04 11:47:18
【问题描述】：

我在这个 jsfiddle http://jsfiddle.net/tovic/gLhCk/ 中找到了以下非常简单的方法来自动将 textarea 调整为文本高度：

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

&lt;textarea id="txtarea" spellcheck="false" placeholder="Statusku..."&gt;&lt;/textarea&gt;

但是，我在我的项目中使用引导程序，这会带来一些问题。

textarea 仅 4px 高而不是 16px。似乎引导程序改变了边距、填充和高度的工作方式？
回车时，文字上下跳动，刺眼。

我尝试在浏览器的 HTML 检查器中删除所有引导类，但问题仍然存在。有谁知道如何解决这个问题？

下面是添加 bootstrap 的 CSS 时的代码：

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

【问题讨论】：

我也一直在寻找如何自动扩展 textarea。我正在做一个 python 教程并使用 pycharm。我把所有这些东西放在哪里？ >.> 到目前为止我的代码是：
Content

标签： css twitter-bootstrap textarea

【解决方案1】：

感谢您的所有回答，它让我对我必须更改的内容有了宝贵的见解。最后，在 css 中增加一点 padding-bottom 就可以了。

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  /* margin:0px 0px; this is redundant anyways since its specified below*/
  padding-top:10px;
  padding-bottom:25px; /* increased! */
  /* height:16px; */
  /* line-height:16px; */
  width:100%; /* changed from 96 to 100% */
  display:block;
  /* margin:0px auto; not needed since i have width 100% now */
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

【讨论】：

【解决方案2】：

将height 替换为min-height

textarea {
  margin:0px 0px;
  padding:5px;
  min-height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

【讨论】：

好的，这似乎适用于问题一。你也有问题二的答案吗？ ;)

【解决方案3】：

我也有同样的问题，用 autosize 引导 textarea 直到我在这里找到解决方案，textarea-autosize lib by javierjulio，它对我有用，你可以试试。

textarea.textarea-autosize {
  height: 2.25rem;
  min-height: 2.25rem;
  resize: none;
  overflow-y:hidden;
}

textarea.textarea-autosize.form-control-lg {
  height: 3.75rem;
  min-height: 3.75rem;
}

textarea.textarea-autosize.form-control-sm {
  height: 2rem;
  min-height: 2rem;
}

有关此库的示例，您可以访问此页面jsfiddle。谢谢

【讨论】：

【解决方案4】：

如果希望输入框自动适应文字高度。您可以尝试不使用 input / textarea 而是使用 div ：

<div contenteditable="true" aria-multiline="true"></div>

【讨论】：

谢谢你，如果有人想要可编辑的表格单元格，那也很好:)

【解决方案5】：

getbootstrap.com 说：

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

hidden 似乎可以很好地完成这项工作，即.. 删除溢出。和往常一样，你必须在里面

【讨论】：

【解决方案6】：

您可以使用 !important 覆盖引导属性。

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px !important;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}

【讨论】：

你试过了吗？对我来说似乎没有预期的效果？
您还可以做一件事，从 css 中删除 textarea 属性并将类 form-control 添加到 textarea 中。
仍在跳跃，但高度仍然错误。也 !important 将其修复为 16，但我希望它调整大小。

【解决方案7】：

它更简单，只需添加一个像rows="10"这样的属性，你可以显示任何你想要的。

【讨论】：

【解决方案8】：

function expandTextarea(id) {
    document.getElementById(id).addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');

body {
  padding:50px;  
}

textarea {
  margin:0px 0px;
  padding:5px;
  height:16px;
  line-height:16px;
  width:96%;
  display:block;
  margin:0px auto;    
}



<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

【讨论】：

用狙击步枪杀死一只苍蝇......伤害大于利润......可能会导致意想不到的影响