在bootstrap中自动调整textarea的大小

时间:2016-06-04 11:47:19

标签: css twitter-bootstrap textarea

我发现以下非常简单的方法可以在这个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;    
}
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

但是,我在我的项目中使用bootstrap,这引入了问题。

  1. textarea只有4px而不是16。看起来像bootstrap会改变边距和填充和高度的工作方式吗?
  2. 当按下进入时,文字上下跳动,这对眼睛有刺激性。
  3. 我尝试删除浏览器的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>

8 个答案:

答案 0 :(得分:5)

感谢您的所有答案,它让我对我必须改变的内容有了深刻的见解。最后,css中的填充底部更多了。

&#13;
&#13;
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');
&#13;
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 */
}
&#13;
<!-- 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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

height替换为min-height

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

答案 3 :(得分:1)

我也遇到同样的问题,使用自动调整大小引导文本区域,直到在这里找到解决方法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 :(得分:1)

getbootstrap.com说:

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

隐藏似乎可以很好地完成工作,即消除溢出。 与往常一样,您必须在

答案 5 :(得分:0)

这是最简单的,只需添加一个属性,例如rows =“ 10”,您就可以随心所欲地显示出来。

答案 6 :(得分:-1)

您可以使用!important来覆盖bootstrap属性。

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

答案 7 :(得分:-1)

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>