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

Automatically resizing textarea in bootstrap

提问by bersling

I found the following very simple way to automatically adjust a textarea to the text height in this jsfiddle http://jsfiddle.net/tovic/gLhCk/:

我发现以下非常简单的方法可以自动将 textarea 调整到此 jsfiddle http://jsfiddle.net/tovic/gLhCk/ 中的文本高度：

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>

However, I'm using bootstrap in my project and this introduces problems.

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

1. The textarea is only 4px high instead of 16. It seems like bootstrap changes the way margins and paddings and heights work?
2. When hitting enter, the text is jumping up and down, which is irritating to the eye.

1. textarea 的高度仅为 4px 而不是 16px。似乎 bootstrap 改变了边距、填充和高度的工作方式？
2. 按回车时，文字上下跳动，刺激眼睛。

I tried to delete all bootstrap classes in the HTML inspector of my browser but the problem was still there. Does anyone have an idea how to resolve this?

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

Here's the code when bootstrap's CSS is added:

这是添加 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>

回答by bersling

Thanks for all your answers, it gave me valuable insights into what I had to change. In the end, a bit more padding-bottom in the css did the trick.

感谢您的所有回答，它让我对我必须改变的内容有了宝贵的见解。最后，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>

回答by Ismail Farooq

replace heightwith min-height

替换height为min-height

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

回答by Kurniawan Prasetyo

I have the same problem, bootstrap textarea with autosize until I found the solution here, textarea-autosize lib by javierjulio, It works for me, you can try it.

我有同样的问题，用 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;
}

For sample of this library you can visit this page jsfiddle. Thanks

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

回答by besomist

If you want the input box to automatically adapt to the text height. You can try not to use input / textarea but to use div like that:

如果想让输入框自动适应文本高度。您可以尝试不使用 input / textarea 而是使用 div 这样的：

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

回答by Priyank Dey

You can use !important to overwrite bootstrap property.

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

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