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

bersling 发表于 Dev

我在以下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>

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

textarea的高度仅为4px，而不是16像素。似乎引导程序会更改边距，填充和高度的工作方式？
当按下回车键时，文本在上下跳跃，这对眼睛来说很烦人。

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

这是添加引导程序的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>

感谢您的所有回答，它为我提供了有关我必须更改的宝贵见解。最后，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; 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。