显示所有textarea行而不滚动

Question

如何显示所有textarea行而不是具有垂直滚动.我已经尝试使用min-height和max-height和height:css但不起作用.

.form-control{
    width:400px;
    min-height: 100px;
    max-height: 900px;
    height: auto;}

我真的不知道是否可以用css做到这一点.

也许可以使用本机javascript,所以我尝试这样的事情

function expandtext(expand) {
    while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
        console.log("display all rows!")>
    }
}

我在这里找到了一些不错的东西,但它只增加和减少行,所以如何在不使用滚动的情况下显示所有textarea行.不需要固定高度的解决方案,需要动态或其他仅适用于Chrome浏览器的解决方案或仅适用于像Object.observe()这样的firefox.

演示

function expandtext(expand) {
  while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
    console.log("display all rows!") >
  }
}

body {
  padding: 20px;
}
.form-control {
  width: 400px;
  min-height: 100px;
  max-height: 900px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
    tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>

外部JSFiddle.

Answer 1

简单的jQuery解决方案是:

$(function() {
    $('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
});

检查小提琴.

由于您需要一个简单的JavaScript解决方案,请使用User panzi创建的以下脚本.您可以在此处查看原始答案.

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('textarea');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

在这里检查小提琴.

Answer 2

不需要Javascript.

您可以使用以下HTML和CSS显示无滚动(即自动重新调整大小)的可编辑文本区域:

.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);}

<div class="textarea" contenteditable="true">

Answer 3

Mozilla 开发者网络在他们的页面上有一个自动增长的文本区域示例HTMLTextAreaElement。如果您想远离可能在旧浏览器上崩溃的 CSS3 解决方案，您绝对应该检查一下。

这是示例中的代码。

以下示例显示了如何在键入时使 textarea 真正自动增长。

function autoGrow(oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}

textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

自动调整

此示例将处理删除行的情况。

function autoAdjustTextArea(o) {
  o.style.height = '1px'; // Prevent height from growing when deleting lines.
  o.style.height = o.scrollHeight + 'px';
}


// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================


// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);

textarea.noscrollbars {
  overflow: hidden;
  width: 400px; /** This is via your example. */
}

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>