【问题标题】:Textarea auto-height-increase文本区域自动高度增加
【发布时间】:2017-10-16 19:08:47
【问题描述】:

我有 html <textarea></textarea> 和 css:

textarea {
    width: 100%;
    max-height: 80px;
    resize: none;
}

如果有很多文本,我希望 textarea 将其高度增加到 80px,然后显示一个滚动条。问题是textarea是25px(我不知道为什么,可能是我的浏览器设置了这个属性),当有很多文本时,它会在25px之后显示一个滚动条。有没有只在 80px 之后才显示滚动条?

【问题讨论】:

    标签: html css textarea


    【解决方案1】:

    你真的需要 js 来做这件事,看下面的例子:

    var textarea = document.getElementById("textarea");
    var limit = 80; //height limit
    
    textarea.oninput = function() {
      textarea.style.height = "";
      textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
    };
    textarea {
        width: 100%;
    }
    <textarea id="textarea"></textarea>

    【讨论】:

    • 现在这是一个很好的答案,简短、甜蜜、完美!
    猜你喜欢
    • 1970-01-01
    • 2014-12-14
    • 1970-01-01
    • 2019-12-01
    • 1970-01-01
    • 2021-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多