Question

我正在尝试创建一个自动重新调整大小的textarea。我有一些代码可以通过向下按下来调整大小，但我需要它，所以文本区域中的所有内容向上移动以显示新行，文本区域的基础固定在其位置。（如果我没有解释得那么，请告诉我！）到目前为止我的代码是：

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

Answer 1

评论中Tewathia回答了这个问题，但我想我应该添加一个答案，以便我可以查看。小提琴：http://jsfiddle.net/afQmf/

HTML：

<div><textarea name="" id="texttype"></textarea></div>

CSS：

    div {
    position:relative;
    height:200px;
}

   #texttype {
    width:200px;
    position: absolute;
    bottom:0;
}

使用Javascript：

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

Answer 2

自动向上和向下重新调整大小 HTML：

<textarea onkeyup="autoGrow(this)"></textarea>

使用Javascript：

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

向上动态调整textarea的大小

2 个答案: